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.mzph.cn/pingmian/57094.shtml

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

相关文章

JVM成神之路

目录 JVM入门关&#xff1a; 一&#xff1a;JVM的内存布局是咋样的&#xff1f; 二&#xff1a;方法区&#xff0c;永久代&#xff0c;元空间有什么区别&#xff1f; 三&#xff1a;常量池和字符串常量池有什么区别&#xff1f; 四&#xff1a;什么是堆溢出&#xff0c;什…

结构化系统分析,结构化系统设计(正片)

结构化分析方法&#xff1a;是面向数据流进行需求分析的方法&#xff0c;是用抽象模型的概念&#xff0c;按软件内部数据传递、变换的关系&#xff0c;自顶向下逐层分解&#xff0c;直到找到满足功能要求的所有可实现的软件为止。 数据流图&#xff08;DFD&#xff09;&#xf…

Linux系统:本机(物理主机)访问不了虚拟机中的apache服务问题的解决方案

学习目标&#xff1a; 提示&#xff1a;本文主要讲述-本机(物理主机)访问不了虚拟机中的apache服务情况下的解决方案 Linux系统&#xff1a;Ubuntu 23.04&#xff1b; 文中提到的“本机”&#xff1a;代表&#xff0c;宿主机&#xff0c;物理主机&#xff1b; 首先&#xff0c…

吴恩达深度学习笔记(7)

误差分析&#xff1a; 你运行一个算法代替人类计算&#xff0c;但是没有达到人类的效果&#xff0c;需要手动检查算法中的错误&#xff0c;对模型的一些部分做相应调整&#xff0c;才能更好地提升分类的精度。如果不加分析去做&#xff0c;可能几个月的努力对于提升精度并没有…

旋转花键材质及运用场景

旋转花键的材质有很多种&#xff0c;其材质选择是一个涉及多方面因素的重要决策&#xff0c;‌主要取决于应用场景的具体要求&#xff0c;包括设备的运行环境、负载大小、运行速度以及所需的耐磨性和耐腐蚀性等因素。 1、碳钢&#xff1a;价格低廉、具有较好的韧性和耐磨性&…

【分享】项目开发中的计算问题

事件背景 最近也就上个月吧&#xff0c;拿到一个新的需求&#xff0c;新建一个页面&#xff0c;三个Grid联动&#xff0c;涉及很多的页面和sql以及Java计算。 简略的画个表格表示一下&#xff1a; 第一个Grid&#xff1a; 第二个Grid&#xff1a; 第三个Grid&#xff1a; 业…

openKylin系统SSH服务配置结合cpolar轻松实现开放麒麟远程连接

前言 本文主要介绍如何在openKlyin系统中设置ssh连接&#xff0c;并结合cpolar内网穿透工具实现远程也可以ssh连接本地局域网内部署的openKlyin系统. openKylin是中国首个基于Linux 的桌面操作系统开发者平台&#xff0c;通过开放操作系统源代码的方式&#xff0c;打造具有自…

Axure显示与隐藏——元件动作一

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;显示与隐藏 主要内容&#xff1a;显示/隐藏/切换三种效果&#xff0c;动画效果&#xff0c;更多效果 应用场景&#xff1a;元件自身状态变化、操作…

LinkedList作者:我虽然开发了LinkedList,但是我更爱用ArrayList

感谢Java面试教程关于LinkedList经验分享 PS冷知识&#xff1a;LinkedList的作者更爱使用ArrayList。 ArrayList 和 LinkedList 是 Java 中两种常见的 List 实现类&#xff0c;它们在底层数据结构、性能特征和使用场景上有显著的区别。 底层数据结构&#xff1a; ArrayList …

Flux.never 使用说明书

public static <T> Flux<T> never()Create a Flux that will never signal any data, error or completion signal. 创建一个永远不会发出任何数据、错误或完成信号的 Flux。 Type Parameters: T - the Subscriber type target Returns: a never completing Flu…

软件缺陷报告

软件缺陷报告样例 软件缺陷基本内容 标题&#xff1a;一句话概述缺陷预置条件&#xff1a;缺陷的前提条件重现步骤&#xff1a;缺陷出现步骤期望结果&#xff1a;没有出现缺陷应该的结果实际结果&#xff1a;缺陷结果 软件缺陷的状态 新建&#xff08;激活&#xff09;->…

idea2024启动Java项目报Error running CloudPlApplication. Command line is too long.

idea2024启动Java项目报Error running CloudPlApplication. Command line is too long. 解决方案&#xff1a; 1、打开Edit Configurations 2、点击Modify options设置&#xff0c;勾选Shorten command line 3、在Edit Configurations界面下方新增的Shorten command line选项中…

前海一个很偏僻的路边免费停车点

​这个偏僻的路边免费停车点具体位置在前海金融中心大厦附近的中国中铁门口&#xff0c;大概有可以停30~50个位置的样子。缺点是很多灰尘哈。第一次路过的时候&#xff0c;我还以为很多车在等红绿灯&#xff0c;靠近才发现&#xff0c;这些车只是停在路面上。其中要想知道看车子…

MySQL | Explain的是使用详解

介绍 Explain是SQL分析工具中非常重要的一个功能&#xff0c;可以模拟优化器执行查询语句&#xff0c;帮助我们理解查询是如何执行的&#xff1b;分析查询执行计划可以帮助我们发现sql查询瓶颈&#xff0c;优化查询性能。 使用方法 MySQL5.7 版本之前使用&#xff1a; Expl…

解决 Elasticsearch cluster_block_exception 错误的终极指南

Elasticsearch 是一个功能强大的分布式搜索引擎&#xff0c;广泛应用于全文检索、实时分析等场景。 尽管如此&#xff0c;像任何复杂系统一样&#xff0c;它也会遇到一些运行问题&#xff0c;其中较为常见且影响较大的就是 cluster_block_exception 错误。 本文将深入解析这种错…

2024.10月16日- 关于Vue2(1)

一 VUE概述与环境搭建 1.1 Vue概述 1.1.1 简介 Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款轻量级的用于构建用户界面的 渐进式的JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高…

入门!Linux 常见指令及权限管理全面指南

Linux 操作系统在现代计算机应用中扮演着重要的角色&#xff0c;广泛用于服务器、桌面系统、嵌入式设备及云计算平台等领域。理解和掌握 Linux 常见指令及权限管理机制&#xff0c;是每一位系统管理员和开发人员的基础技能。本文将详细介绍 Linux 系统的基本背景、常用指令、权…

桂林旅游一点通:SpringBoot平台应用

3系统分析 3.1可行性分析 通过对本桂林旅游景点导游平台实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本桂林旅游景点导游平台采用SSM框架&#xff0c;JAVA作…

iOS IPA上传到App Store Connect的三种方案详解

引言 在iOS应用开发中&#xff0c;完成开发后的重要一步就是将IPA文件上传到App Store Connect以便进行测试或发布到App Store。无论是使用Xcode进行原生开发&#xff0c;还是通过uni-app、Flutter等跨平台工具生成的IPA文件&#xff0c;上传到App Store的流程都是类似的。苹果…

package.json 里的 dependencies和devDependencies区别

dependencies&#xff08;依赖的意思&#xff09;&#xff1a; 通过 --save 安装&#xff0c;是需要发布到生产环境的。 比如项目中使用react&#xff0c;那么没有这个包的依赖就会报错&#xff0c;因此把依赖写入dependencies npm install <package-name>// 缩写 np…