本文详解在 API 响应结构由扁平转为嵌套（如新增 data 包裹层）后，React 表单中 onChange 事件失效、意外生成冗余字段（如 data.name）的根本原因，并提供安全、可维护的解决方案——通过函数式更新精准修改嵌套状态，避免污染顶层对象。
本文详解在 api 响应结构由扁平转为嵌套（如新增 `data` 包裹层）后，react 表单中 `onchange` 事件失效、意外生成冗余字段（如 `data.name`）的根本原因，并提供安全、可维护的解决方案——通过函数式更新精准修改嵌套状态，避免污染顶层对象。
当后端将原扁平响应（如 { "name": "Tank", "dimensions": "2.0x22.5x4.0" }）升级为嵌套结构（如 { "status": 1, "data": { "name": "Tank", "dimensions": "2.0x22.5x4.0" } }），前端表单若未同步调整状态更新逻辑，极易出现「字段写入错位」问题：用户输入本应更新 values.data.name，但 handleInputChange 却错误地在顶层创建了 values["data.name"] 字符串键——这是因原始代码直接用 [name] 动态赋值，而 name="name" 并不等价于路径 data.name。
核心症结在于：状态更新方式与数据结构不匹配。原逻辑 setValues({ ...values, [name]: value }) 将所有输入视为顶层属性，而新结构要求变更必须精准作用于 data 子对象内部。
✅ 正确解法是使用函数式更新（setValues(prev => ...)），并显式构造嵌套更新路径：
const handleInputChange = (e) => {
const { name, value } = e.target;
setValues((prevValues) => ({
...prevValues,
data: {
...prevValues.data,
[name]: typeof value === 'string'
? value.replace(/ +(?= )/g, '').trimStart()
: value,
},
}));
};该方案确保：
- ✅ name 和 dimensions 的变更始终被写入 values.data 内部；
- ✅ 不污染顶层对象（杜绝 data.name 这类非法键）；
- ✅ 兼容 values.data 可能为 undefined 的初始状态（...prevValues.data 安全展开）；
- ✅ 保留其他顶层字段（如 status）不变。
⚠️ 注意事项：
- 不要修改 name 属性为 'data.name'：HTML name 属性仅用于表单序列化，与 React 状态路径无关；强行设为 'data.name' 会导致 e.target.name === 'data.name'，进而触发 values["data.name"] = ...，加剧问题。
- 验证逻辑需同步适配：validate() 中应检查 fieldValues?.data?.name 而非 'data.name' in fieldValues（后者是字符串键检测，已无意义）；
- 初始化状态建议明确结构：将 useState({} as any) 改为更健壮的初始值，例如：
const [values, setValues] = useState({
status: 0,
data: { name: '', dimensions: '' }
});最后，若业务要求提交时还原为扁平结构（即不带 data 包裹），可在 handleSubmit 中解构：
const handleSubmit = async (e) => {
e.preventDefault();
const payload = {
status: values.status,
name: values.data?.name,
dimensions: values.data?.dimensions,
};
await axios.put(`${detailsUrl}/${selectedRecord.id}`, payload);
};总结：面对 API 数据结构演进，前端表单不应被动“适配字段名”，而应主动建模状态结构，并通过函数式更新保障嵌套路径的精确性。这不仅是修复 bug 的手段，更是构建可维护表单系统的底层原则。
