0

react官网接收中有一段说state和props是异步更新的,因此不要基于他们去计算下一个状态的值并给出了错误实例:

this.setState({
  counter: this.state.counter + this.props.increment,
});

这里我的理解是props是父组件传进来的数据~他的更新是在父组件中的函数中完成的,而state中的数据在当前组件去更新~但是不管这两个对象怎么更新~只要是使用正确的方法去设置(即在当前组件使用setState或是在父组件使用setState去更新数据)这些更新操作都应该触发react重新渲染组件吧~那无论数据如何异步变化最后应该都是正确的才对,不知为何官网会有这个描述

2个回答

0

已采纳

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state
上面是官方给出的解释,
setState可以批量处理来提高它的性能,this.props 和 this.state的更新是异步的,不能依赖上一个state来计算下一个state的值,
举个例子:
最开始 this.state.counter=1;
执行一次
this.setState({
counter: this.state.counter + 1,
});
然后在执行一次
this.setState({
counter: this.state.counter + 1,
});
期望的结果应该是this.state.counter值为3,但是this.state.counter可能不是3,

0

考虑在一个函数中调用两次setState的情况

// ...
this.setState({
    counter:this.state.counter+1
})
// some code
this.setState({
    counter:this.state.counter+2
})

这段代码最后的结果可能是couter只增加了2,因为this.state.counter并不永远来自最新的state
避免的方法是用将函数作为setState的参数

this.setState((prevState, props) => {
  return {counter: prevState.counter + props.step};
});

这也是官网推荐使用的方法

另外你题目描述的代码片段我在官网没找到,可以的话麻烦放一下

撰写答案