为什么 setCnt 中没有更新 useState？答案

【问题标题】：Why useState is not updated in setCnt?为什么 setCnt 中没有更新 useState？
【发布时间】：2021-02-27 06:22:41
【问题描述】：

我希望 updateState 在每次循环之后创建一个循环并添加到 cnt 1（这是我想要做的一个简短示例，所以它必须像这样，而不是第一次添加 3）。但是因为 setCnt 是异步的，所以它只为所有 3 的循环添加一个。任何 idia 如何使其添加每个循环 3 同步？

const [cnt, setCnt] = useState(0)

const updateState = () => {
  for (var i = 1; i<3; i++){
  setCnt(cnt + 1)
  }
}

useEffect(() => {
  console.log('new state', cnt)
}, [cnt])

return (
  <div>
    <button onClick={updateState}>Change state</button>
  </div>
)
}

谢谢

【问题讨论】：

在问题中添加相关代码。看起来您在更改后直接在线上打印状态，那是行不通的。状态变化是异步的
哦，谢谢，您知道如何解决吗？
解决什么？下面威廉的回答显示了如何正确打印它，您还有其他问题吗？我们需要更好地描述您的具体问题和相关代码

标签： javascript html reactjs react-hooks

【解决方案1】：

好的，如果你想在设置状态时使用之前的状态值（在这种情况下，之前的值 + 1），你需要将一个函数传递给 set state 调用。该函数的参数是先前的状态值。所以这应该可以满足您的需求：

import React, { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const updateCount = () => {
    for (let i = 0; i < 3; i++) {
      // Pass a function here
      setCount(prevCount => prevCount + 1);
    }
  };

  return (
    <div>
      <h1>Count:</h1>
      <div>{count}</div>
      <button onClick={updateCount}>Add 3 to count</button>
    </div>
  );
}

【讨论】：

【解决方案2】：

由于setScore函数是异步的，设置状态后不能立即获取更新状态。您需要在 useEffect 中获取它。

useEffect(() => {
  console.log(score)
}, [score])

【讨论】：

谢谢！但是我在哪里更新分数？（setScore我应该写什么）
不用更新，你调用setScore正确，只需要在useEffect中看到结果
为了清楚起见，我应该添加 useEffect(() => { console.log(score) }, [score])，它应该可以工作（打印 setScore 的最后更新）？
参考这个。 reactjs.org/docs/hooks-reference.html#useeffect