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

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

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);
};

但是，在第二个调用运行时，状态似乎还没有从第一个调用完成设置；如果我在第二次通话时设置了超时时间，它可以正常工作

---

正确的方法是什么？

这就是为什么您应该始终这样做的原因，这样它将为您提供实际的当前状态：

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

---

这就是为什么您应该始终这样做，以便它将为您提供实际的当前状态：

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

---

@SLaks建议的另一种方法有时很有用，就是使用

setState（new_state，callback）

方法。状态更新且“可见”后，将运行回调

通常，

setState

不会立即更改状态，使其在

此.state

中可见。从

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

---

@SLaks建议的另一种方法有时很有用，就是使用

setState（new_state，callback）

方法。状态更新且“可见”后，将运行回调

通常，

setState

不会立即更改状态，使其在

此.state

中可见。从

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

如中所述，基于先前状态更新状态的正确方法是将函数传递到

setState（）

调用中，例如：

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

如中所述，基于先前状态更新状态的正确方法是将函数传递到

setState（）

调用中，例如：

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

---

为什么要调用两次？短期内可能重复的setState调用是批处理的together@VivekN调用两次以切换状态中两个不同部分的值。为什么要调用两次？短期内可能重复的setState调用是批处理的together@VivekN调用两次以切换状态中两个不同部分的值。如何这能解决问题吗。setState调用是批处理的，因此即使这样也不会work@SLaks，你是说

{…！state.lists.selected}

？如果是这样，这将不起作用，因为在我的例子中，

state.lists.selected

是一个布尔值，而不是一个对象。@AndrewJensen:No；我的意思是

选中：

。这将如何解决问题。setState调用是批处理的，因此即使这样也不会work@SLaks，你是说

{…！state.lists.selected}

？如果是这样，这将不起作用，因为在我的例子中，

state.lists.selected

是一个布尔值，而不是一个对象。@AndrewJensen:No；我的意思是

选中：

。这比使用生命周期挂钩更可取吗？取决于您如何构造代码。通常，我会尝试显式地为每个UI操作设置一个

setState

。如果不可能，我将执行回调，因为它使代码更具可读性。这比使用生命周期挂钩更可取吗？取决于代码的结构。通常，我会尝试显式地为每个UI操作设置一个

setState

。如果不可能，我将执行回调，因为它使代码更具可读性。