[react] 严格模式下setState两次调用及解决方法

最新推荐文章于 2024-06-12 18:31:59 发布
最新推荐文章于 2024-06-12 18:31:59 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： react 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45743738/article/details/106624233
版权
在React严格模式下，由于状态更新的特殊处理，setState可能会被调用两次，导致意外行为，如本例中一次性删除两个列表项的问题。通过分析代码和官方解释，可以理解这是严格模式的正常表现，用于帮助开发者检测不一致的状态更新。解决方法包括移除严格模式或者使用深拷贝确保状态更新的正确性。
摘要由CSDN通过智能技术生成

背景

在做列表删除的时候, 发现一次性删除了2个项, 觉得奇怪. 后来经过讨论, 发现是使用了严格模式导致setState被执行了两次.

删除前:
在这里插入图片描述

删除后:
在这里插入图片描述

index.js代码

ReactDOM.render(
  <React.StrictMode>
    <App />,
  </React.StrictMode>,
  document.getElementById('root')
)

删除组件代码

// js逻辑
fnDel = (i) => {
   
  cons
最低0.47元/天 解锁文章
AlexDeng2019
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react学习笔记之state以及setState的使用
11-27
在React开发中，状态（state）和setState()方法是核心概念，它们对于构建动态和响应式的用户界面至关重要。本文将深入探讨这两个概念及其在React组件中的应用。 首先，让我们了解什么是状态（state）。在React中，...
深入研究React中setState
11-27
在上述例子中，尽管`setState`被连续调用了两次，但在第二次调用时，`count`的值仍然是0，这是因为状态更新被放入队列，直到队列被清空或渲染时才执行。 `ReactUpdates`模块是React更新机制的关键部分，它提供了...
React setState执行两次的问题
量子前端的博客
06-02 2549
在做组件库的过程中，测试项目引入线上组件发现状态的修改执行了两次，而组件项目中只执行一次（正常），分析原因后发现组件项目未开启严格模式，而测试项目开启了严格模式，代码如下： 解决方案有两种： 1.关闭严格模式 2.深拷贝需要修改的状态变量 最后贴一下官方的解释：...
react setState执行两次的原因
sunzhen15896的博客
02-24 218
setstate
react的严格模式 和 解决react useEffect执行两次
最新发布
weixin_45705239的博客
06-12 1141
能发现这个问题的👨‍🎓，一定是一名细心并且有一颗求知的❤️。因为我当时接触React的时候就是这样的想法。为什么会触发两次？按照正常的声明周期应该执行一次的！！！！！
关于React中的setState
友人C君的博客
01-12 253
React中的setState是异步的吗？ setState是同步执行的！但是state并不一定会同步更新（异步更新和同步更新都存在） setState()中有个特别重要的布尔属性isBatchingUpdates（默认为false），它决定了state是同步更新还是异步更新。 异步更新： 合成事件 钩子函数 setState 只在合成事件和钩子函数中是“异步更新”的。异步更新的背后，是同步代码处理（"合成事件和钩子函数"的调用在"更新"之前）。异步是为了实现批量更新的手段，也是React性能优
react 严格模式（控制台调用两次问题）
qg2276879379的博客
08-12 2376
前言：由于用脚手架创建项目，默认会自动启用严格模式，所以你会发现双调用现象 严格模式(Strict Mode) StrictMode 是一个用以标记出应用中潜在问题的工具。就像 Fragment ，StrictMode 不会渲染任何真实的UI。它为其后代元素触发额外的检查和警告。 注意:严格模式检查只在开发模式下运行，不会与生产模式冲突。\color{#FF3030}{注意: 严格模式检查只在开发模式下运行，不会与生产 模式冲突。}注意:严格模式检查只在开发模式下运行，不会与生产模式冲突。 impo
React setState异步更新但不完全异步
Ranye的博客
06-20 225
大多情况下，setState 是异步的，因此可以进行多次更新的合并 解决的办法有： 给 setState 传入一个函数而非对象。会自动将状态更新操作添加到队列中，等前面的更新完毕后传入更新的状态值 然而，有些情况下 setState 是同步的 React 批量更新原理 类似于 setTimeout 和 promise 这样的 async work ，就不会触发批量更新 这些要进入 EventLoop 队列的都会被认为是 async work。 关于任务队列（EventLoop）和 async work
深入掌握 react的 setState的工作机制
11-29
然而，这种合并可能导致状态更新的丢失，比如在上面的例子中，连续两次`setState`可能只会将`demo`的值设为2，而不是期望的3。 2. 传递一个回调函数： ```jsx this.setState((previousState, currentProps) => { ...
react-react面试题之性能优化的手段.zip
03-20
3. **React.memo**：类似于PureComponent，React.memo用于函数组件的优化，它会比较前后两次传入的props，只有当props改变时才会重新渲染组件。 4. **useMemo与useCallback**：这两个React Hooks可以帮助缓存计算值...
react-pdf-sample:react-pdf + react-window示例项目
04-28
要通过http提供随附的示例pdf，请使用诸如东西当前的问题当前，react-pdf的Page组件与react-virtualized的CellMeasurer组件结合在一起存在，在卸载了Page组件之后，似乎正在调用setState({}) 。 这可能仅是在Chrome...
react中同时setState同一个对象的两个不同参数 只有最后一个生效的原因以及解决办法
hzxOnlineOk的博客
07-19 1472
问题： 我定义了2个表单对应的事件去处理日期数据以及其他类型的数据，我在表单某个Input输入时，调用onBlur在输入框失去焦点时自动根据输入框的值（身份证号码）填充出生日期以及性别 但是我发现react中同时setState同一个对象的两个不同参数 只有最后一个生效，why? 原因： React会将多个this.setState产生的修改放在一个队列里，缓一缓，攒在一起，觉得差不多了再引发一次更新过程。 react为了提高整体的渲染性能，会将一次渲染周期中的state进行合并，在这个渲染周期中
React 中的useState 和 setState 的执行机制
p1967914901的博客
02-07 4569
React 中的useState 和 setState 的执行机制 useState 和 setState 在React开发过程中 使用很频繁，但很多人都停留在简单的使用阶段，并没有正在了解它们的执行机制，例如：**它们是同步的还是异步的？**正因为没有理解它们，才致使开发过程中会碰到一些出乎意料的bug。本文将带大家了解它们的特性。 它们是同步的还是异步的？ setState和 useState 只在合成事件如onClick等和钩子函数包括componentDidMount、useEffect等中是“异步
React之this.setState使用需知注意点 -this.setState无法正确改变state值
zrq1210的博客
09-30 7651
React之this.setState使用需知注意点 -this.setState无法正确改变state值 最近在项目中，出现了一些用setState()无法给state中的变量正确赋值的情况，特此总结一下this.setState使用的注意点。 那为什么用this.setState()会出现一些跟我们常规逻辑不相符的地方呢？ 请看下表(两个特性即为两个需要注意的点）： （思路： 因为它这样的特...
react中如何修改state值
m0_46205209的博客
09-25 4998
根据State类型 更新 当状态发生变化时，如何创建新的状态？根据状态的类型，可以分成三种情况： 1、 状态的类型是不可变类型（数字，字符串，布尔值，null， undefined） 这种情况最简单，直接给要修改的状态赋一个新值即可 //原state this.state = { count: 0, title : 'React', success:false } //改变state this.setState({ count: 1, title: 'bty', success: t
React 多个setState会调用几次？
火星基地
11-10 4170
1. 两个setState，调用几次？ 如下代码所示，state中有一个count。对按钮绑定了点击事件，事件中执行了两次setState，每次都将count的值加1。 当点击按钮时，setState会执行几次？render()会执行几次？ 答案：都是1次。 state = { count: 0 }; handleClick = () => { this.setState({ count: this.state.count + 1 }); this.setState({ count:
react 连续调用了两次this.setState，但是只会引发一次更新生命周期render（）只执行一次
Amen的博客
07-30 1万+
问题： 因为业务需求，一个方法里需要多次调用setState（也可能是我自己菜，我觉得这些set不能整合到一块）， setState了很多次，然后render（）只调用了一次 原因： React会将多个this.setState产生的修改放在一个队列里，缓一缓，攒在一起，觉得差不多了再引发一次更新过程。 react为了提高整体的渲染性能，会将一次渲染周期中的state进行合并，在这个渲染...
react中的setState不及时生效的简便完美解决方法
热门推荐
qq_34307128的博客
08-20 1万+
react中的setState不及时生效的简便完美解决方法 话不多说，直接上代码 在你想更新state的地方，加一个setTimeout，setTimeout是同步的，带动state立即更新，亲测有用 ...
autorun 放在 componentDidMount 导致方法调用两次 解决方法代码
06-14
import React, { Component } from 'react'; import { autorun } from 'mobx'; class MyComponent extends Component { state = { data: null, }; componentDidMount() { this.disposer = autorun(() => { /...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值