Question

我有一个方法，通过复制值然后更新状态来切换状态中的布尔值：

toggleSelected = () => {
    let selected = this.state.lists.selected;
    selected = !selected;
    this.setState({
      // update state
    });
};

我有另一个方法，由onClick处理程序触发，调用toggleSelected两次：

switchList = (listName) => {
    const currList = this.getCurrentList();
    if(listName === currList.name) return;
    this.toggleSelected(listName);
    this.toggleSelected(currList);
};

然而，在第二次通话运行时，状态似乎没有从第一次通话中完成设置;如果我在第二次通话时设置超时，则可以正常工作。

这样做的正确方法是什么？

Answer 1

@SLaks建议的替代方法，有时候很有用，是使用input.hashSets = [ { "data1" : [ "AD0234829205B9033196BA818F7A872B", "098F6BCD4621D373CADE4E832627B4F6", "5A105E8B9D40E1329780D62EA2265D8A" ], "data2" : [ "8AD8757BAA8564DC136C1E07507F4A98" ] }, { "data1" : [ "40499da7ee1456a2f79dc39a718aaf9b", "2bf2cededea424f47d64d33c511dd431" ], "data2" : [ "b068931cc450442b63f5b3d276ea4297", "8717cfca734e8987971f63b20eeb8024", "16ebd6af0cadece819da7468a9fd79f4" ] } ];方法。一旦状态更新并且＆＃34;可见＆＃34;。

，将运行回调

通常，setState(new_state, callback)不会立即更改状态，以便在setState中显示。来自docs

setState（）并不总是立即更新组件。它可以批量推迟更新或推迟更新。这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。

Answer 2

如React State/Lifecycle docs所述，基于先前状态更新状态的正确方法是将函数传递给setState()调用，例如：

toggleSelected() {
  this.setState((prevState, props) => {
    return {
      lists: {
        selected : ! prevState.lists.selected
      }
    };
  });
}

Answer 3

这就是为什么你应该总是pass a lambda to setState()，这样它会给你实际的当前状态：

this.setState(state => ({ ..., selected: !state.lists.selected }))

如何在React中处理对setState的异步调用？

3 个答案: