react18中如何实现同步的setState来实现所见即所得的效果

在react项目中,实现添加列表项,最后一项自动显示在可视区域范围!!

实现效果请添加图片描述

代码实现

import { useState, useRef } from "react";
import { flushSync } from "react-dom";
function FlushSyncRef() {const [msgLists, setMsgList] = useState([]);const [msg, setMsg] = useState("");const ulRef = useRef(null);const handleAdd = (e) => {e.preventDefault();setMsg("");setMsgList((prev) => {console.log(prev);return [...prev, msg];});ulRef.current.lastChild.scrollIntoView({behavior: "smooth",block: "end",});console.log("🚀 ~ handleAdd ~ ulRef.current:", ulRef.current.lastChild);};function handleChangeText(e) {setMsg(e.target.value);}return (<div><inputtype="text"placeholder="Enter your msg"value={msg}onChange={handleChangeText}/><button onClick={handleAdd}>添加</button><hr /><ulstyle={{ height: "90px", border: "1px solid red", overflow: "auto" }}ref={ulRef}>{msgLists.map((item, index) => {return (<li key={index}>这是第{index}{item}</li>);})}</ul></div>);
}export default FlushSyncRef;

测试发现,组件崩溃了!!!!!

在这里插入图片描述
意思就是没有找到要滚动的元素,元素为null,上面不存在这个scroll方法。
在默认数据改造下
请添加图片描述
可以发现,最后一项始终慢了一步,不能同步的显示到可视区域。
为啥为这样呢?

在 React 中,state 更新是排队进行的。通常,这就是你想要的。但是,在这个示例中会导致问题,因为 setTodos 不会立即更新 DOM。因此,当你将列表滚动到最后一个元素时,尚未添加待办事项。这就是为什么滚动总是“落后”一项的原因。

要解决此问题,你可以强制 React 同步更新(“刷新”)DOM。 为此,从 react-dom 导入 flushSync 并将 state 更新包裹 到flushSync

  • 修复后的代码
const [msgLists, setMsgList] = useState(["test0000"]);
// ....
const handleAdd = (e) => {e.preventDefault();flushSync(() => {setMsg("");setMsgList((prev) => {console.log(prev);return [...prev, msg];});});ulRef.current?.lastChild?.scrollIntoView({behavior: "smooth",block: "end",});console.log("🚀 ~ handleAdd ~ ulRef.current:", ulRef.current.lastChild);};// ....

这样,再测试就实现了我们的需求了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/453822.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SSM网络在线考试系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;在线考试管理&#xff0c;试题管理&#xff0c;考试管理&#xff0c;系统管理 前台账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;在线考试&#xff0c;公告信…

word删除空白页 | 亲测有效

想要删掉word里面的末尾空白页&#xff0c;但是按了delete之后也没有用 找了很久找到了以下亲测有效的方法 1. 通过鼠标右键在要删除的空白页面处显示段落标记 2. 在字号输入01&#xff0c;按ENTER&#xff08;回车键&#xff09; 3.成功删除了&#xff01;&#xff01;

ECharts饼图-饼图34,附视频讲解与代码下载

引言&#xff1a; 在数据可视化的世界里&#xff0c;ECharts凭借其丰富的图表类型和强大的配置能力&#xff0c;成为了众多开发者的首选。今天&#xff0c;我将带大家一起实现一个饼图图表&#xff0c;通过该图表我们可以直观地展示和分析数据。此外&#xff0c;我还将提供详…

模型实战(27)之 YOLO11 推理、验证及训练自己的数据集

模型实战(27)之 YOLO11推理、验证及训练自己的数据集 2024年10.17,YOLO11是近期十月份刚经ultralytics团队更新优化发布的视觉算法深度学习网络模型,其网络模型结构代码实现也采用了比较新的Python数据结构,所以虚拟环境搭建安装包也比较新,经过多次踩坑,把关键环节记录…

电子便签:从偶像剧到职场的实用转变

在快节奏的现代生活中&#xff0c;便签已经成为了我们不可或缺的助手&#xff0c;无论是纸质的还是电子的&#xff0c;它们都以小巧的“身躯”承载着我们的日常记忆和待办事项。从偶像剧中常见的“便利贴”女孩形象&#xff0c;到如今电子便签的普及&#xff0c;它们帮助我们捕…

百度搜索竞价推广有必要做吗?怎么做效果好!

百度竞价推广&#xff0c;有的行业适合&#xff0c;有的行业则不行&#xff0c;下面我给大家分享下哪些行业可以。 如果是招商加盟、招代理商、招经销商&#xff0c;或者是高客单价咨询服务费&#xff0c;甚至是找合作方、渠道方的企业主都可以投放竞价推广。 总之一句话&…

网络安全的五大误区,你中招了吗?

在数字化时代&#xff0c;网络安全问题日益突出&#xff0c;许多人在使用网络过程中存在一些误区&#xff0c;导致个人信息泄露、财产损失等问题。本文将为您揭示网络安全的五大误区&#xff0c;帮助您提高安全防范意识。 误区一&#xff1a;使用复杂密码就一定安全 许多人认为…

基于SpringBoot+Vue+uniapp微信小程序的垃圾分类系统的详细设计和实现(源码+lw+部署文档+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…

万户ezEIP企业管理系统 productlist.aspx SQL注入漏洞复现

0x01 产品简介 万户ezEIP是一种企业资源规划软件,旨在帮助企业管理其各个方面的业务流程。它提供了一套集成的解决方案,涵盖了财务、供应链管理、销售和市场营销、人力资源等各个领域。 0x02 漏洞概述 万户ezEIP企业管理系统 productlist.aspx 接口存在SQL注入漏洞,未经身…

11_原始值的响应式方案-ref

目录 引入 ref解决响应丢失的问题自动脱 ref 引入 ref 在之前实现的 reactive 方法&#xff0c;其代理的目标必须是一个非原始值才行&#xff0c;例如&#xff1a; let str vue // 无法拦截 str 的修改 str vue3上述这个例子表达的意思就是&#xff0c;我们还缺少一个能够对…

ZYNQ:流水灯实验

实验目的 PL_LED0 和 PL_LED1 连接到 ZYNQ 的 PL 端&#xff0c;PL_LED0 和 PL_LED1循环往复产生流水灯的效果&#xff0c;流水间隔时间为 0.5s。 原理图 程序设计 本次实验是需要实现两个LED的循环熄灭点亮&#xff0c;时间间隔是0.5S,对时间间隔的控制使用计数器来完成。本…

第十九课:Python学习之继承

继承 目标 单继承多继承 面向对象三大特性 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中继承 实现代码的重用&#xff0c;相同的代码不需要重复的编写多态 不同的对象调用相同的方法&#xff0c;产生不同的执行结果&#xff0c;增加代码的灵活度 01. 单继承 …

安装buildkit,并使用buildkit构建containerd镜像

背景 因为K8s抛弃Docker了,所以就只装了个containerd,这样就需要一个单独的镜像构建工具了,就用了buildkit,这也是Docker公司扶持的,他们公司的人出来搞的开源工具,官网在 https://github.com/moby/buildkit 简介 服务端为buildkitd,负责和runc或containerd后端连接干活,目前…

MySQL 查询按照更新时间排序遇到相同更新时间的会少数据

MySQL分页后出现重复数据或丢失记录的原因可能包括&#xff1a;SQL查询条件不一致、使用了不稳定的排序、LIMIT语句与ORDER BY配合问题、缓存设置不当或数据库复制配置错误。需要检查查询逻辑和系统配置以解决这些问题。 MySQL分页导致数据重复的原因&#xff1a; 1、排序算法…

如何有效维护您的WordPress在线商店内容:提高客户参与度与转化率的实用技巧

在电子商务领域&#xff0c;内容为王。新鲜、相关且有吸引力的内容能显著提升客户参与度和转化率。本文将探讨如何有效更新和维护您的在线商店内容&#xff0c;确保客户始终获得最佳体验。 定期更新产品信息 产品描述 产品描述是吸引客户和促成销售的关键。定期检查并更新产…

Netty基础原理

1.Netty概述 Netty是由JBoss提供的开源的高性能、异步事件驱动的网络应用框架&#xff0c;通过Netty可以很快的构建出通信效率极高的应用&#xff1b; 异步与同步是相对的&#xff0c;在请求或执行过程中&#xff0c;如果会阻塞等待就是同步&#xff0c;反之就是异步 1.1 Net…

vue3纯前端验证码示例

前言 验证码的用途&#xff1a;通过要求用户输入一串难以被机器自动识别的字符或图像&#xff0c;有效阻止恶意用户或脚本通过暴力破解方式尝试登录账户。验证码的分类&#xff1a;常见的验证码有短信、文本、图形等&#xff0c;安全度越高&#xff0c;依赖的插件或服务也越多…

ENSP环回路由的配置

环回路由配置如下&#xff0c;网段及其基础配置已写完。为了实现全网通&#xff0c;需要给路由器手写配置&#xff0c;使用 ip route—static目标网段下一跳。把所有情况都要考虑到&#xff0c;就会出现去往一个网段的最优路径和次优路径&#xff0c;近路和远路都能前往目标网段…

Spire.PDF for .NET【页面设置】演示:在 C# 中应用 PDF 页面转换

当您在导出为 PDF 格式的文档中翻页时&#xff0c;页面过渡会显示装饰效果&#xff0c;例如溶解或擦除。当您以 PDF 格式创建幻灯片时&#xff0c;页面过渡特别有用。Spire.PDF是一款专为开发人员设计的强大 .NET 组件&#xff0c;可让您将页面过渡应用于 PDF 文件。 这里介绍…

【新专栏】Excel数据分析与模拟决策

专栏入口&#xff1a;Excel数据分析与模拟决策 主要面向使用Excel的用户&#xff0c;讲解Excel的数据分析&#xff0c;模拟分决策内容&#xff0c;内容涵盖基于Excel的统计分析&#xff0c;数据生成&#xff0c;采样&#xff0c;假设检验&#xff0c;线性回归&#xff0c;线性规…