reactjs - 跟踪 useState 的第二个结果

Question

我们有以下场景。一个按钮触发一个回调方法，该方法做一些工作，然后休眠一秒钟，然后更新一个状态：

const Component = () => {
  const [myState, setMyState] = useState(0);

  const callback = useCallback(async () => {
    // do something
    ...
    // sleep for a second
    await new Promise(resolve => setTimeout(resolve, 1000));
    // set state
    setMyState(1);
  }, []);

  return (
    ...
      <button onClick={callback} />
    ...
  );
}

我有两个问题：

• 是否保证setMyState, 的第二个结果useState总是该方法的同一个实例？或者我是否需要将它包含在 的第二个参数中useCallback，以确保内部方法使用最新版本的setMyState?
• 让我们假设第一个问题的答案是“否”（如果是，那么考虑另一个钩子，答案是否定的）。如何确保在间隔之后运行的回调部分使用 的最新实例setMyState？在 1 秒超时期间，组件可能会因为 props（或其他状态）的变化而重新渲染，并且在重新渲染期间，实例可能会发生变化。发生这种情况时， sleep 方法对捕获的对象有一个旧的引用。

我已阅读Dan Abramov 关于 setInterval 的评论。但是，在我看来，他正在谈论另一个问题。在他的示例中，超时总是很短，并且何时重置间隔无关紧要。在我的用例中，这确实很重要。该方法必须运行到最后。

标签： reactjsreact-hooks