React中setState更新对象数组不生效，第二次添加才显示前条数据问题

• 你写的setQualifications((prev) => [...prev, values])函数式更新的写法是正确的，更新逻辑本身没有问题，出现这个现象是React状态更新的固有特性导致的，核心涉及两个点：状态更新的异步批处理、函数闭包捕获当前渲染的状态快照
• 调用setQualifications之后，React不会立刻修改当前作用域下的qualifications变量，当前函数执行时拿到的始终是本次渲染对应的状态快照，所以你在set之后立即打印的还是旧值，看不到刚更新的内容。
• 你观察到“添加第二个对象时第一个才被加入数组”，本质是你每次打印的都是上一轮的状态：
  1. 第一次添加值为one的条目时，函数内拿到的是初始值[{}]，set之后新状态已经变为[{}, 'one']，但你打印的还是旧的初始值，所以看不到one
  2. 第二次添加值为two的条目时，函数内拿到的是上一轮更新后的状态[{}, 'one']，所以你打印的时候能看到one，但这次添加的two要等下一次渲染才能看到
• 另外你初始状态设置的是useState([{}])，所以数组默认就会带一个空对象，如果你不需要这个初始空对象，可以改成useState([])

如果你需要查看更新后的状态，可以通过useEffect监听qualifications的变化来获取最新值，参考代码如下：

const [qualifications, setQualifications] = useState([]); // 可按需调整初始值

function handleAddQualification(values: any) {
  console.log('传入的新值：', values);
  setQualifications((prev) => [...prev, values]);
}

// 监听状态变化，状态更新后会触发这里的回调，拿到最新值
useEffect(() => {
  console.log('更新后的qualifications：', qualifications);
}, [qualifications]);

内容的提问来源于stack exchange，提问作者Jason Davidson