前端面试题：下面代码中，点击 “+3” 按钮后，age 的值是什么？

大叔爱吃猕猴桃

import { useState } from 'react';

export default function Counter() {
  const [age, setAge] = useState(42);
  function increment() {
    setAge(age + 1); 
  }
  return (
    <>
      <h1>Your age: {age}</h1>
      <button onClick={() => {
        increment();
        increment();
        increment();
      }}>+3</button>
    </>
  );
}

点击 +3 时，可能只更新为 43。

这是因为 setAge(age + 1) 即使多次调用，也不会立即更新组件状态，而是会进行合并，最终只触发一次重新渲染。

如果要实现调用三次就增加 3 ，可以将 increment 改为函数式更新：

function increment() {
    setAge(a => a + 1); // 函数式更新
}