React+TypeScript中useForm结合setState传对象不更新，逐个赋值才生效？

核心原因 #

React的useState通过浅比较判断状态是否需要更新：如果两次传入的状态对象引用完全相同，React会判定状态未发生变化，不会触发组件重渲染。

你遇到的情况，大概率是useForm返回的data对象复用了同一个引用——表单内部更新字段时，只是修改了对象的属性值，但没有创建新的对象。所以第一次调用setPersonalInfo(data)时，data是全新的引用，状态能更新；后续调用时，data的引用和之前的personalInfo引用一致，React就跳过了更新。而逐个赋值的方式{name:data.name, email:data.email, about:data.about}是手动创建了新对象，引用不同，所以每次都能触发更新。

最优实现方式 #

不需要逐个手动赋值，用对象扩展运算符（...）创建新对象即可，既简洁又保证引用唯一：

const handlePersonalInfo = (data: PersonalData) => {
  // 扩展运算符创建新对象，确保引用唯一
  setPersonalInfo({ ...data });
};

关于console.log的误区 #

你代码里的console.log(personalInfo)打印的是更新前的旧状态，因为useState的更新是异步批量处理的。如果要查看更新后的状态，可以用useEffect监听状态变化：

useEffect(() => {
  console.log('更新后的personalInfo:', personalInfo);
}, [personalInfo]);

或者使用setPersonalInfo的回调函数（第二个参数）：

setPersonalInfo({ ...data }, () => {
  console.log('更新后的personalInfo:', personalInfo);
});

内容的提问来源于stack exchange，提问作者Juan Luque