react 排队一系列状态变化

排队一系列状态变化

这个组件有问题：点击“+3”只会增加一次分数。

import { useState } from 'react';

export default function Counter() {
  const [score, setScore] = useState(0);

  function increment() {
    setScore(score + 1);
  }

  return (
    <>
      <button onClick={() => increment()}>+1</button>
      <button onClick={() => {
        increment();
        increment();
        increment();
      }}>+3</button>
      <h1>Score: {score}</h1>
    </>
  )
}

快照状态解释了为什么会发生这种情况。设置状态请求新的重新渲染，但不会在已经运行的代码中更改它。

可以通过在设置状态时传递更新程序函数来解决此问题。请注意替换如何修复“+3”按钮setScore(score + 1)。setScore(s => s + 1)如果您需要对多个状态更新进行排队，这很方便。

import { useState } from 'react';

export default function Counter() {
  const [score, setScore] = useState(0);

  function increment() {
    setScore(s => s + 1);
  }

  return (
    <>
      <button onClick={() => increment()}>+1</button>
      <button onClick={() => {
        increment();
        increment();
        increment();
      }}>+3</button>
      <h1>Score: {score}</h1>
    </>
  )
}