当前位置: 首页 > news >正文

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);};// ....

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

相关文章:

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

在react项目中&#xff0c;实现添加列表项&#xff0c;最后一项自动显示在可视区域范围&#xff01;&#xff01; 实现效果 代码实现 import { useState, useRef } from "react"; import { flushSync } from "react-dom"; function FlushSyncRef() {con…...

深入理解MVP架构模式

引言 MVP&#xff08;Model-View-Presenter&#xff0c;模型-视图-提供者&#xff09;是一种广泛应用于软件开发中的架构模式&#xff0c;是经典MVC&#xff08;Model-View-Controller&#xff09;的变种。在传统的MVC模式中&#xff0c;Model和View之间存在直接的依赖和数据交…...

Java面试题七

一、Java中的集合框架是如何组织的&#xff1f;列举几个常用的集合类。 Java中的集合框架是一个设计用来存储和操作对象集合的统一架构。它主要由两大接口派生出来&#xff1a;Collection和Map。这两个接口及其子接口和实现类共同构成了Java集合框架的主体。 集合框架的组织结…...

linux网络编程3——http服务器的实现和性能测试

http服务器的实现 本文使用上一篇博文实现的epollreactor百万并发的服务器实现了一个使用http协议和WebSocket协议的WebServer。 完整代码请看我的github项目 1. 水平触发(Level Trigger)与边沿触发(Edge Trigger) 1.1 水平触发 水平触发是一种状态驱动机制。当文件描述符&a…...

Docker部署Kamailio,并使用LinPhone实现网络通话

前提条件 准备一个路由器&#xff0c;一个服务器&#xff0c;两个终端设备&#xff08;手机或电脑&#xff09; docker部署安装 我使用的是windows系统&#xff0c;docker desktop 先启动Docker desktop打开cmd&#xff0c;输入docker命令docker run --name kamailio --rm…...

JAVA-石头迷阵小游戏

采用企业式项目结构,接下来我将分享全部代码和结构,希望大家点点关注! 这是我的结构。首先使用IDE创建一个Module,命名stone-maze,接着把自带src下的main方法删除,接着在src下创建包,包名为com.wmuj,接着创建APP类代码如下: package com.wmuj;public class App {publ…...

鸿蒙--进度条通知

主要介绍如何使用通知能力和基础组件,实现模拟下载文件,发送通知的案例。 效果 代码结构 ├──entry/src/main/ets // 代码区 │ ├──common │ │ ├──constants │ │ │ └──CommonConstants.ets // 公共常量类 │ │ └──utils │ │ ├──Logger.ets //…...

搜维尔科技:varjo xr-4开箱测评,工业用途头显,一流视觉保真度

varjo xr-4开箱测评&#xff0c;工业用途头显&#xff0c;一流视觉保真度 搜维尔科技&#xff1a;varjo xr-4开箱测评&#xff0c;工业用途头显&#xff0c;一流视觉保真度...

mysql数据量分库分表

一、分库分表参考阈值 分库分表是解决大规模数据和高并发访问问题的常用策略。虽然没有绝对的阈值来决定何时进行分库分表&#xff0c;但以下是一些参考阈值和考虑因素&#xff0c;可以帮助你做出决策&#xff1a; 1.1 数据量阈值 单表数据行数&#xff1a;当单表的数据行数…...

Vite创建Vue3项目以及Vue3相关基础知识

1.创建Vue3项目 1.运行创建项目命令 # 使用 npm npm create vitelatest2、填写项目名称 3、选择前端框架 4、选择语法类型 5、按提示运行代码 不出意外的话&#xff0c;运行之后应该会出现 下边这个页面 6.延伸学习&#xff1a;对比webpack和vite&#xff08;这个是面试必考…...

Elasticsearch封装公共索引增删改查

什么是索引&#xff1f; 定义&#xff1a;索引是 Elasticsearch 中用于存储数据的逻辑命名空间。它由多个文档组成&#xff0c;每个文档是一个 JSON 格式的结构化数据对应关系&#xff1a;在关系数据库中&#xff0c;索引类似于表&#xff1b;而在 Elasticsearch 中&#xff0…...

Python异常检测:Isolation Forest与局部异常因子(LOF)详解

这里写目录标题 Python异常检测&#xff1a;Isolation Forest与局部异常因子&#xff08;LOF&#xff09;详解引言一、异常检测的基本原理1.1 什么是异常检测&#xff1f;1.2 异常检测的应用场景 二、Isolation Forest2.1 Isolation Forest的原理2.1.1 算法步骤 2.2 Python实现…...

Git的原理和使用(二)

1. git的版本回退 之前我们也提到过&#xff0c;Git 能够管理⽂件的历史版本&#xff0c;这也是版本控制器重要的能⼒。如果有⼀天你发现 之前前的⼯作做的出现了很⼤的问题&#xff0c;需要在某个特定的历史版本重新开始&#xff0c;这个时候&#xff0c;就需要版本 回退的功能…...

docker 发布镜像

如果要推广自己的软件&#xff0c;势必要自己制作 image 文件。 1 制作自己的 Docker 容器 基于 centos 镜像构建自己的 centos 镜像&#xff0c;可以在 centos 镜像基础上&#xff0c;安装相关的软件&#xff0c;之后进行构建新的镜像。 1.1 dockerfile 文件编写 首先&…...

投了15亿美元,芯片创新公司Ampere为何成了Oracle真爱?

【科技明说 &#xff5c; 科技热点关注】 一个数据库软件公司却想要操控一家芯片厂商&#xff0c;这样的想法不错。也真大胆。 目前&#xff0c;全球数据库巨头甲骨文Oracle已经持有Ampere Computing LLC 29%的股份&#xff0c;并有可能通过未来的投资选择权获得对这家芯片制造…...

vue 报告标题时间来自 elementUI的 el-date-picker 有开始时间和结束时间

要在Vue中使用 Element UI 的 el-date-picker 来选择开始时间和结束时间&#xff0c;并将其展示在报告中&#xff0c;以下是详细的实现步骤。 实现思路&#xff1a; 使用 Element UI 的 el-date-picker 组件&#xff0c;让用户选择时间范围&#xff08;开始时间和结束时间&am…...

简单几何问题的通解

来&#xff0c;这道题怎么做&#xff1f;边长为2的正方形内&#xff0c;2个扇形的交集面积是多少&#xff1f;这道题一定要画辅助线&#xff0c;因为要用到两个扇形的交点&#xff0c;如果不画辅助线&#xff0c;这个交点相关的4个子图一个都无法求出面积&#xff0c;只能求出子…...

DBeaver导出数据表结构和数据,导入到另一个环境数据库进行数据更新

在工作中&#xff0c;我们会进行不同环境之间数据库的数据更新&#xff0c;这里使用DBeaver导出新的数据表结构和数据&#xff0c;并执行脚本&#xff0c;覆盖另一个环境的数据库中对应数据表&#xff0c;完成数据表的更新。 一、导出 右键点击选中想要导出的数据表&#xff0…...

【Golang】合理运用泛型,简化开发流程

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…...

OpenCV单目相机内参标定C++

基于OpenCV 实现单目相机内参标定&#xff1a; a.使用OpenCV库实现内参标定过程。通过角点检测、亚像素角点定位、角点存储与三维坐标生成和摄像机标定分别获取左右相机的内参。 b.具体地&#xff0c;使用库函数检测两组图像&#xff08;左右相机拍摄图像&#xff09;中棋盘格…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...