React：如何用cir对象初始化FormData状态并实现表单更新？

初始化代码失效的核心原因 #

1. setState异步闭包问题：循环里多次调用setFormData时，每次引用的FormData都是当前函数闭包中的初始空对象，所以每次更新都是基于空对象添加单个键值对，最终只会保留最后一次循环的结果。
2. 动态键名写法错误：key: cir[key]会把属性名固定为字符串"key"，而非cir里的实际键名，必须用ES6计算属性语法[key]: cir[key]才能绑定正确的动态键名。
3. 冗余的逐个字段更新：完全没必要循环设置单个字段，直接一次性合并整个cir对象到状态里更高效。

修正后的初始化代码 #

替换你的setInitialFormData函数，无需循环：

const setInitialFormData = () => {
  // 直接用cir对象初始化FormData，覆盖原有空状态
  setFormData({ ...cir });
  // 如果需要保留FormData中已有的修改内容，用回调函数获取最新状态：
  // setFormData(prevState => ({ ...prevState, ...cir }));
};

额外优化建议 #

1. 移除as any的类型断言：为FormData定义明确类型，避免类型不安全问题：

// 先定义cir的类型
type CIR = {
  // 填入cir实际的键值类型，比如 name: string; age: number;
};
const [FormData, setFormData] = useState<CIR>({} as CIR);

2. 优化初始化时机：把初始化逻辑放到useEffect中，确保cir数据加载完成后再执行：

useEffect(() => {
  if (isSuccess && cir) {
    setInitialFormData();
  }
}, [isSuccess, cir]);

这样既能正确用cir初始化FormData，也不会影响你原本正常工作的表单onChange更新逻辑。

内容的提问来源于stack exchange，提问作者somebody coding