正在链接状态更新

Chaining state updates

本文关键字：更新 状态 链接      更新时间：2023-09-26

我编写了在多个组件之间分配逻辑的代码。目前，这些通过回调触发单独的状态更新，对应于类似于的控制流

this.state({foo: React.addons.update(this.state.foo, {$push: 'bar'})});
...
this.state({foo: React.addons.update(this.state.foo, {$push: 'qux'})});

不幸的是，第二次推送覆盖了第一次推送，因为React不会立即更新状态变量，而只是在执行回调之后。是否有调试第一个状态更新的更改以保留第一个状态？

我认为您需要确保在更新新状态时引用了以前的状态。我认为React.addons.update代码在这里没有帮助——你用它来不改变处于状态的数组吗？

如果向setState传递函数而不是仅传递对象，则可以访问以前的状态。在下面创建一个jsfiddle，其中有2个div和您当前的代码，我认为其中一个可以满足您的需要。

https://facebook.github.io/react/docs/component-api.html

handleClick2:function(){
    this.setState(function(previousState, currentProps) {
        return {text2: previousState.text2.concat(['foo'])};
    });
    this.setState(function(previousState, currentProps) {
        return {text2: previousState.text2.concat(['bar'])};
    });
},

https://jsfiddle.net/sa4vvtjL/

相关文章：