Question

import "./styles.css";
import {useState} from 'react';

export default function App() {

  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);

  console.log("Render: ", count, count2);

  function update() {
    setCount(count + 1);
    setCount(count + 1);
  }

  function updateWithCB() {
    setCount2(prevCount => prevCount + 1);
    setCount2(prevCount => prevCount + 1);
  }

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={update}>+</button>
      <br />
      <p>{count2}</p>
      <button onClick={updateWithCB}>+ with CB</button>
    </div>
  );
}

我是一个学习反应，遇到了这种行为。当 + 被点击时，它只更新一次，但当 + 和 cb 被点击时，它会按预期更新两次。这是否意味着 useState 函数调用被合并，如果是，如何在使用多个 useState 调用时预测合并？为什么当 + 按钮被点击一次时它不打印 2 呢？有什么反应具体的原因吗？谢谢

Answer 1

由于 setState 批量处理，在这种情况下（在更新函数中），先前的 setState 将被最后一个 setState 覆盖，因此您需要使用在 updateWithCB 中使用的函数 setState。

看看这个答案，我觉得很清楚：What is prevState in ReactJS?

Answer 2

基本上，这就是您的update 函数内部发生的情况： setCount(0 + 1); setCount(0 + 1);

因此，最后您将 count 设置为 1。但是，当您使用回调方式时，它会按预期工作：状态更新异步，所有回调都会传递实际状态值。（在您的情况下为 prevCount）。

反应 useState 批量更新

2 个答案: