React, 2 setstate in same function: 第二个擦除第一个

Question

我正在尝试运行上面的代码，但状态仅针对 idx 进行更新。据我了解，第二个函数的 setState 不会获得更新状态，这就是发生这种情况的原因。有没有办法让它正常工作（期待而不是将 2 个功能合并为一个）

doIt(idx,array) {
   this.doFirst(array);
   this.doSecond(idx);
}

doFirst(array){
   //bla bla bla code
   this.setState(test: {...this.state.test, array});
}

doSecond(idx) {
    // bla bla bla code
    this.setState(test: {...this.state.test, idx});
}

Answer 1

很难准确判断，因为您的示例 setState 调用不太正确，this.setState(test: {...this.state.test, idx});。你是说你在做 this.setState({test: {...this.state.test, idx}});？如果是这样，您应该使用回调而不是像这样的对象：

this.setState(() => ({ test: {...this.state.test, idx}})

Answer 2

下面两条语句同时执行。

this.doFirst(array);
this.doSecond(idx);

这两个调用 setState.setState is asynchronous。因此，无法保证值会按顺序更新。由于这场比赛，价值被覆盖了。更好地链接这些调用。

doIt(idx,array) {
   this.doFirst(array);   
}

doFirst(array){
   //bla bla bla code
   this.setState({test: {...this.state.test, array}},()=>{

    this.doSecond(idx); 
   });
}

doSecond(idx) { 
    this.setState({test: {...this.state.test, idx}});
}

Answer 3

setState() 是异步的。

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

它接受一个可选的回调函数，该函数将在 setState 完成并重新呈现组件后执行。你可以使用那个回调。

如果下一个状态依赖于前一个状态，建议使用updater函数形式setState(updater[ callback])

doIt(idx,array) {
   this.doFirst(array, () => this.doSecond(idx));
}

doFirst(array, callback){
   //bla bla bla code
   this.setState(firstUpdaterFunction, callback);
}

doSecond(idx) {
    // bla bla bla code
    this.setState(2ndUpdaterFunction);
}

参考文献：

https://reactjs.org/docs/react-component.html#setstate

Answer 4

我假设您只是将括号放错了状态对象，所以我添加了这些。

无论如何，您想改用更新程序功能：

this.setState((prevState, props) => ({test: {...prevState.test, array}});

请注意，这可能不是您想要的，因为在 ES 2015 中它转换为： this.setState((prevState, props) => ({test: {...prevState.test, array: array}});

您也想对其他功能做同样的事情。 React 批处理将状态调用设置在一起，因此如果您不使用更新程序，您可能会为连续的函数调用访问陈旧状态。这可能就是这种情况下发生的情况。

Answer 5

正如其他人已经指出的那样，setState 是异步的。如果你需要使用之前的状态，我想指出 setState 的第一个参数是 updater，它可以带一个函数来从之前的状态计算下一个状态：

doFirst(array){
   this.setState(previousState => ({ test: {...previousState.test, array} }));
}

doSecond(idx) {
    this.setState(previousState => ({ test: {...previousState.test, idx} }));
}

React, 2 setstate in same function: 第二个擦除第一个

React, 2 setstate in same function: second one erase the first

setstate

reactjs