Question

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

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

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

Answer 1

我认为您需要确保在更新新状态时引用先前的状态。我不认为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/

链接状态更新

1 个答案: