如何正确使用 setState

如何解决如何正确使用 setState

我正在学习 react，根据 react doc，我发现 setState 有两种形式：

• setState({someState: someValue}) #form1
• setState((preState) => ({someState: doSomething(preState)})) # form2

#form1 直接设置状态，#form2 通过回调函数设置状态。

在 Using state correctly 部分，我被告知 form1 可能不安全，所以这是否意味着我应该始终正确使用 #form2 来 setState？但是我很快注意到有 another example here ，使用 #form1 来更新状态，这是一个错误的例子吗？

#form1 和 #form2 可能都正确，但在这种情况下使用 #form1 是完全安全的，并且 在什么情况下我应该使用#form2？

解决方法

形式的选择取决于下一个状态是否使用当前状态的值。

如果新状态依赖于当前状态，则使用形式 2。否则使用形式 1。

,

我在 setState 上写了一个便条。我希望它能帮助你正确使用它。如果你认真阅读并理解它，你会更好地使用它来管理状态。

设置状态

它是异步

state = { count: 0};
increment() {
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    console.log(this.state.count) // 0
}

increment() 
console.log(this.state.count); // 1

并且，this.state.count 的最终值在调用 incemenent() 完成后将为 1

因为 React 批处理所有调用，并找出结果，然后有效地进行更改。这种纯 JavaScript 代码，在最后一个获胜的地方合并

newState = Object.assign(
    {},firstSetStateCall,secondSetStateCall,thirdSetStateCall,);

所以，我们在这里可以说一切都与 JavaScript 对象合并有关。所以还有另一种很酷的方式，我们在 setState 中传递一个函数而不是对象。

state = { count: 0};
increment() {
    this.setState( (state) => {  return { count: state.count + 1} } );
    this.setState( (state) => {  return { count: state.count + 1} } );
    this.setState( (state) => {  return { count: state.count + 1} } );
}

increment();
console.log(this.state.count) // 3

这次我们将得到 3 个，因为之前可以合并对象，但不能合并函数，因此它像同步一样工作。

但是这种在 this.setState 中传递参数的方法的另一个很好的应用是您可以在从函数返回对象之前实现逻辑

this.setState( (state) => { if(state.count === 0) return { count: state.count + 1} } );

不仅如此，我们在 setState 内部传递的函数还需要另一个参数 props。

this.setState((state,props) => { //play here })

但是，我们传递给它的函数可能会随着时间变得混乱，那又怎样？只需创建一个常规的 JavaScript 函数

并将其传递给 setState

this.setState(fn)

如果 SetState 是异步的，我们如何在状态更新后立即执行操作？

setState 实际上有两个参数，这两个中的第二个是回调函数，在状态更新后调用，

this.setState ( 
    (state,props) => { 
        // code here
    },() => {console.log("updated state",this.state)}
        
 )