使用React Hook setSomeSetting更改组件状态落后一步

Question

我试图使用React Hooks来管理一个简单的文本输入字段和提交输入按钮的状态。输入字段不断验证（现在只是检查长度

我已将参数扩展为setMuffinSettings，以显式返回一个对象，并已确认此返回对象的顺序为：true。因此，问题与setMuffinSettings本身有关，而不是传递给setMuffinSettings的对象不正确。

我还研究了另外两个与React挂钩（特别是挂钩）和“落后一步”有关的StackOverflow问题。这两个问题的解决方案都不能解决我的问题。

React hook和settings变量初始化：

  const [muffinSettings, setMuffinSettings] = useState({
    isInStock: false,
    isOrdered: false,
  });

提交按钮事件处理程序：

  const handleMuffinOrder = () => {
    console.log(muffinSettings); // BEFORE: isOrdered is correctly false
    if (muffinSettings.isInStock) {
      console.log('reached'); // this is printed so it's not an issue with isInStock
      setMuffinSettings(prev => ({ ...prev, isOrdered: true }));
    }
    console.log(muffinSettings); // AFTER: isOrdered is incorrectly still false
  }

提交按钮：

    return (
      <SubmitOrderButton>
        text="Submit your muffin order"
        // onButtonClick={handleMuffinOrder}
        onButtonClick={() => handleMuffinOrder()}
        // the 2 lines above give me the same error
      />
    );

我希望在setMuffinSettings调用之前，muffinSettings.isOrdered为FALSE，之后为TRUE，前提是muffinSettings.isInStock为TRUE（事实上是）。

用我现在的代码，muffinSettings落后了一步。在下面handleMuffinOrder的代码片段中，我包含了第一次单击按钮时打印的控制台输出。但是，第二次单击它时，isOrdered BEFORE的值已设置为TRUE。因此，isOrdered的值似乎在第一次和第二次按钮点击之间发生了变化。

我相信这不是建议的“setState不会立即更新状态”问题的重复，因为我们在这里使用了React钩子，它只是在React 16.8之后才可用，而不是“旧的”React状态系统。根据React文档，setMuffinSet接受的唯一参数是新状态，即新对象；它不会像上面建议的问题答案建议的那样进行回调。

Answer 1

 const [isInStock, setIsInState] = useState(true);
  const [isOrdered, setIsOrdered] = useState(false);

  const handleMuffinOrder = () => {
    if (isInStock) {
      setIsOrdered(true);
    }
  };
  console.log(isInStock, isOrdered);
  return <button onClick={() => handleMuffinOrder()}> Click Me </button>;
};

对于这样一个简单的组件，这是最简单的方法。我在CodeSandbox中进行了测试，它将的状态更改为true

Answer 2

即使在钩子中，setState的基本实现也保持不变。它仍然是异步的。

再次引用文档：

状态更新可能是异步的。您不应该依赖它们的值来计算下一个状态。

Answer 3

它本身并不落后一步，它比这更微妙——出于性能原因，状态更新是批处理的，并且异步发生。如果你需要在状态改变后做一些事情，那么use效应就是你的朋友。