Question

我正在学习钩子。我正在尝试更新状态，但没有立即反映出来。这是我的代码。

const Test = (props) => {
    const [score , setScore] = useState(0);
    const [count , setCount] = useState(0);
    const [total, setTotal] = useState(0);
 
const playerBallClick= ()=> {
        setCount(count+1);
        setScore(Math.floor(Math.random() * 10));
        setTotal(total + score);
    }

return (
        <div>
            <button onClick={playerBallClick}>Ball</button>
    {/* <p>Total score is - {totalscore}</p> */}
        </div>
    )
}

单击“球形”按钮后如何立即更新总计。

Answer 1

得分是stale closure，请尝试以下方法：

const playerBallClick = () => {
  setCount(count + 1);
  const newScore = Math.floor(Math.random() * 10);
  setScore(newScore);
  setTotal(total => total + newScore);
};

Answer 2

您可以像这样使用useEffect钩子，

useEffect(() => {
   setTotal(total + score);
}, [count]);

因此，每次计数状态更改时，此挂钩将称为更新总状态。

状态不会立即反映在反应挂钩中

2 个答案: