复杂的react组件 setState不更新 - 使用函数作为setState的第一个参数

最新推荐文章于 2024-03-26 17:05:41 发布
最新推荐文章于 2024-03-26 17:05:41 发布
阅读量4.1k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_24070543/article/details/80666676
版权

写了一个很复杂的stateful组件,
结果在某一个功能上，
触发函数它却不更新视图了，
难以排查,
…
问题的关键在这行代码

this.setState({ value: doSomething(this.state.value) })

千万不要在this.setState中使用this.state.xxx取值，
如果要使用this.state中的值，
使用函数作为第一个参数：

this.setState((prevState)=>({ value:  doSomething(prevState.value) })

over

hao像飘在外太空
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入掌握 react的 setState的工作机制
08-29
这是因为 setState 是异步的，第二个 setState 方法会覆盖第一个 setState 方法的更新请求。 `handleAsyncStateChange = () => { this.setState((preState, preProps) => { return { demo: preState.demo + 1...
关于this.setState()的那些事
飞翔的熊blabla
04-26 1402
在网上看了很多关于this.setState()的介绍，觉得受益匪浅，就总结了一些帮助自己理解的点，在此分享出来，如果有侵权的地方，请及时提醒。 一、State的定义 状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是它是私有的，并且由组件本身完全控制，可以认为它是组件的“私有属性（或者是局部属性）”。 二、关于 setState() 有三件事是你应该知...
setState的参数
outstanding木槿
02-05 1193
React 项目中的 UI 的改变来源于 State 改变，类组件中 setState 是更新组件，渲染视图的。
React总结8：setState()的参数
热门推荐
juzipchy的博客
07-20 1万+
一般使用setState的时候，用的最多的用法是： 例如：{count:0}//初始化count this.setState({count:1}); 这个无可置疑，更新count。 昨天看别人博客，发现了setState的另一种用法,总结如下： this.setState((prevState, props) => ({ counter: prevState.counter + p
React突变状态，更新数据（对象或者数组），页面数据不刷新的问题
XuZhiqiang的博客
06-19 4625
​ 刚开始开发时，我们可能会遇到这样的问题，使用useState创建对象或者数组时，setState时，页面显示的数据未进行更新。
react useState数据更新不同步问题
前端劝退工程师
03-21 1万+
原因 合并更新造成的数据不能及时更新（非标准异步过程） 为什么我会在我的函数中看到陈旧的 props 和 state ？ 解决方案 1.使用useRef存值 在useEffect中监听state变化，存进ref中 import './App.css'; import React, { useState,useRef,useEffect} from 'react'; function App() { let [count,setCount]=useState(0) const myRef =
react学习笔记之state以及setState的使用
08-28
* 当参数是 Function 时，setState() 会将上一个 setState() 的结果作为参数传入这个函数。 setState() 的第二个参数 setState() 的第二个参数是一个回调函数，表示 State 更新完成。我们可以使用这个回调函数来...
react-ReactStepProgressBar一个库用于在React中创建带步骤的进度条
08-15
{ id: 1, label: '第一步' }, { id: 2, label: '第二步' }, { id: 3, label: '第三步' }, ]; class MyProgressBar extends React.Component { state = { currentStep: 1, }; handleStepClick = (stepId) =>...
react-tic-tac-toe-hooks：使用功能组件和挂钩进行React Tic Tac Toe游戏
02-18
而在功能组件中，我们可以调用`useState`，它会返回一个数组，其中第一个元素是状态变量，第二个元素是一个函数，用于更新该状态。例如： ```jsx const [state, setState] = useState(initialState); ``` 2. `...
React-Native-To-Do-List-App:我曾经开始的第一个React Native项目
04-13
- **虚拟DOM**: 虽然React Native不直接使用DOM，但它有一个类似的“虚拟Native DOM”，用于高效地更新用户界面。 2. **React Native核心组件** - **View**: 类似HTML的div，是基本的布局容器。 - **Text**: ...
React中setState方法详解
AI_huihui的博客
12-10 1万+
一、为什么要使用 setState 方法，如何用？ 在 React 中，组件分为 有状态组件 和 无状态组件，有状态组件就是能够定义 state 的组件，比如类组件，无状态组件反之，比如函数组件。state 就是用来描述事物在某时刻的数据，可以被改变，改变后与视图相映射，用来保存数据和响应视图。 虽然状态可以改变，但不是响应式的，动态改变并没有与视图响应，想要改变并响应视图则需要 setState 修改并更新视图。 使用方法：this.setState...
React使用setState后页面没有更新
qq_64436918的博客
04-15 5349
React使用setState后页面没有更新
react中的setState详解
white-hang的博客
12-27 5336
本文主要介绍了react中的setState
react setState不更新的问题
sakura的博客
02-02 2388
react setState不更新的问题
react的setState函数
weixin_45847735的博客
02-18 1025
问题情境一：当我们要改变React类组件的状态的时候，为什么不能直接用 this.state = xxx 这种方式来修改？ setState方法是由父类Component所提供的，当我们调用这个函数时，React.js会更新组件的状态state，并重新调用render方法，然后把render方法所渲染的最新内容显示到页面上。而如果直接用 this.state = xxx 这种方式来修改， React.js就没办法知道你修改了组件的状态，它也就没有办法更新页面，所以，一定要使用 React.js 提供的 s
React-setState执行过程(为什么不会同步更新组件)
LYFlied的博客
03-31 1398
setState 不会立刻改变React组件中state的值. - setState 通过触发一次组件的更新来引发“重绘”. - 多次 setState 函数调用产生的效果会合并。 一、setState 为什么不会同步更新组件？ 二、setState执行过程,流程图 分场景讨论 1.钩子函数和合成事件中 2.异步函数和原生事件中 3.componentDidMount调用setstate 4.componentWillUpdate componentDidUpdate 5.事件处理类型 6.传入的是函数
setState用法总结
dongwang的博客
12-21 4084
1. setState传参 setState中，第一个参数可以传入对象，也可以是函数，第二个为可选参数，参数为一个回调函数，那么什么场景下传入对象？什么场景下使用函数，什么场景下需要传入第二个参数呢？ 如果state的更新不依赖于之前的state中的值，使用对象 如果state的更新依赖之前state中的值，则第一个参数传入函数 如果state更新完成后立马需要使用state的值，则需要传入第二个参数 2. setState是同步还是异步 如果在react生命周期函数中使用setState或者直接在re
react useState的初始化函数 初始化值为props时的同步问题 | setState函数的使用与异步更新
最新发布
好好学习天天向上
03-26 1479
的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”。按照惯例，通常将待定状态参数命名为状态变量名称的第一个字母，如 age 为 a。明确这里所说的同步和异步指的是 API 调用后更新 DOM 是同步还是异步的。2.当事件被触发后，通过获取事件源对象，查看事件源对象中是否存在。不是同步地一个一个执行，会一个一个加入队列，然后最后。，修改的是组件下一次渲染的。
理解React中的setState()方法
Meteor的笔记
01-31 520
setState()是React组件中用于更新状态的方法之一。它接受一个对象或一个函数作为参数，用于指定新的状态值。当状态更新时，React会重新渲染组件，以反映最新的状态。}));
react里的类组件和函数组件的setState的不同
08-14
`useState`返回一个数组，第一个元素是当前状态的值，第二个元素是一个更新状态的函数。使用`useState`定义的状态只是一个独立的值，并不会与其他状态进行合并。在更新状态时，使用状态更新函数传入新的状态值。与`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值