本文深入解析 react 中使用解构获取表单字段名后，为何必须用方括号 `[name]` 语法更新 state，而非直接写 `name: value`——关键在于区分字面量键名与动态计算属性名。
在 react 表单处理中，我们常通过统一的 handleChange 事件处理器管理多个输入项，典型写法如下：
function handleChange(e) { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }这段代码看似简洁，但其中 [name] 的方括号语法至关重要。它的作用是将变量 name 的运行时值作为对象的动态键名（即“计算属性名”，Computed Property Name），这是 es6 对象字面量的语法特性。
? 为什么不能写成 { …formData, name: value }？
因为不加方括号时，name 会被当作字面量字符串键 “name”，而非变量 name 所存储的实际值（如 “firstName” 或 “email”）。例如：
- 假设输入框为
- 解构后：name = “email”, value = “user@example.com”
- ✅ 正确写法 setFormData({ …formData, [name]: value }) → 等价于 { …formData, email: “user@example.com” }
- ❌ 错误写法 setFormData({ …formData, name: value }) → 等价于 { …formData, name: “user@example.com” }（新增一个固定键 “name”，而非更新 “email” 字段）
? 对比演示
const formData = { firstName: 'Alex', age: 28 }; const name = 'firstName'; const value = 'Alice'; // ✅ 动态键：使用变量值作为 key console.log({ ...formData, [name]: value }); // → { firstName: 'Alice', age: 28 } // ❌ 静态键：字面量 "name" 成为 key console.log({ ...formData, name: value }); // → { firstName: 'Alex', age: 28, name: 'Alice' }⚠️ 注意事项
- 方括号语法仅在对象字面量初始化时有效（即 { [key]: value }），不可用于普通赋值如 obj.[name] = value（语法错误）；
- 若 name 可能为 undefined 或非法标识符（如含空格、连字符），需校验或规范化，否则会导致意外键名（如 { [“user-name”]: “xxx” } 是合法的，但可能不符合预期）；
- 在 typescript 中，建议为 formData 定义明确接口，并确保 name 类型受限于 keyof（例如 keyof typeof formData），提升类型安全性。
✅ 最佳实践小结
| 场景 | 写法 | 说明 |
|---|---|---|
| 动态字段更新 | { …state, [e.target.name]: e.target.value } | ✅ 利用计算属性名精准映射 |
| 静态字段更新 | { …state, count: state.count + 1 } | ✅ 字面量键名适用于已知固定字段 |
| 混合更新 | { …state, [dynamicKey]: newValue, staticField: ‘fixed’ } | ✅ 支持动态与静态键共存 |
掌握这一机制，不仅能写出更健壮的表单逻辑，也是理解 javaScript 对象高级特性和 React 状态更新模式的重要基础。