javascript - 在 React 中调用 setState 后，是否有硬性规则来避免访问/更改状态时出现异步错误？

Question

我正在学习 React，这是我第一次处理异步操作。目前我正在构建一个简单的计算器，在使用 setState 然后立即尝试访问状态后遇到了一些小问题。解决这些问题很容易，因为我的应用程序非常简单。但是，我无法找到关于调用 setState 后需要多长时间才能确定状态实际上已更新的明确规则。是否需要一定的时间？它取决于我的代码结构吗？另外，在 setState 之后使用 setTimeout 是否合适，以便给状态更新时间？如果有人能让我了解 React 何时更新状态并让我省去猜测，我将不胜感激。

Answer 1

Does it require a certain amount of time?

没有具体金额。

Is it dependent on the structure of my code?

一般来说，但这不是真正的问题。 :-)

Also, is it appropriate to use setTimeout after setState in order to give state time to update?

没有。

In React after calling setState, are there hard and fast rules for avoiding asynch errors when accessing/changing state?

是的。它们在文档中进行了介绍，特别是 here 。它们(至少)是:

1. 了解状态已完成更改的唯一方法是使用 componentDidUpdate 或您可以提供给 setState (第二个参数)的完成回调:

   this.setState(newState, () => {
       // `this.state` has the updated state
   });
   

2. 如果您要根据现有状态更改状态，则必须使用 setState 形式，该形式接受函数作为其第一个参数并使用最新状态调用它为你改变。

3. (不是特定于异步的。)永远不要直接修改状态对象或其引用的任何对象。

举个例子:假设您有一个数组 (items)，如果条目尚不存在，则需要将其插入其中:

// WRONG, breaks Rule #3
if (!this.state.items.includes(newItem)) {
    this.state.items.push(newItem);
}

// WRONG, breaks Rule #2
if (!this.state.items.includes(newItem)) {
    this.setState({items: [...items, newItem]});
}

// WRONG, breaks Rule #1
this.setState({items: [...items, newItem]});
doSomethingWith(this.state.items);

相反:

this.setState(
    ({items}) => {
        if (!items.includes(newItem)) {
            return {items: [...items, newItem]};
        }
    },
    () => {
        doSomnethingWith(this.state.items);
    }
);

但请注意，使用完成回调(上面的第二个函数)通常是一种反模式；当状态更新时，组件真正应该做的唯一一件事就是重新渲染，React 会为你调用 render 。

但是这个答案不能替代阅读 the documentation 。 :-)