如何正确编写带有 settimeout 的 React 代码？

Question

我有下一个代码：

const Button = () => {
  const [numbers, setNumbers] = useState({
    a: 10,
    b: 30,
    c: 100,
    d: new Date()
  });

  const click = () => {
    setTimeout(click2, 2000);
  };

  const click2 = () => {
    setNumbers({
      a: numbers.a + 1,
      b: numbers.b + 1,
      c: numbers.c + 1,
      d: new Date()
    });
  };

  return (
    <>
      <button onClick={click}>+</button>
      <p>{numbers.a}</p>
      <p>{numbers.b}</p>
      <p>{numbers.c}</p>
      <p>{numbers.d.toLocaleString()}</p>
    </>
  );
};

当我按下按钮一次时，代码工作正常。但是如果我连续按两次按钮，代码只会运行一次。请解释为什么会这样，以及如何在每次单击时都生成代码运行？

Answer 1

这是因为click2函数在第二次点击时将具有旧的状态值，因为第一次点击的setState还没有运行，而不是直接引用statevalue使用prevState方法设置状态，根据那个改变你的click2函数如下

    setNumbers((num) => {
      return {
        a: num.a + 1,
        b: num.b + 1,
        c: num.c + 1,
        d: new Date()
      };
    });
  };

请参考thiscodesandbox参考

如何正确编写带有 settimeout 的 React 代码？

How to write react code with settimeout correctly?

javascript

event-loop

settimeout

promise

reactjs