React中使用扩展运算符更新对象时如何将变量作为动态属性名

你需要使用ES6引入的计算属性名语法实现需求，直接用方括号[]包裹你的字段变量即可：

const onChangeCallBack = (field, value) => {
  // 用[field]标记该位置要取field变量的值作为属性名
  setObj(obj => ({...obj, [field]: value}))
}

原写法不生效的原因 #

直接写field: value时，JavaScript会将field识别为字符串字面量的属性名，等价于你硬编码了"field": value，自然不会读取变量存储的实际字段名。
使用方括号包裹变量后，JavaScript会优先计算方括号内的表达式结果，再将结果作为属性名赋值，完美匹配动态更新指定字段的需求。

拓展用法（表单场景简化） #

如果你的回调是绑定给表单输入组件的，可以直接利用输入框的name属性进一步简化代码，不需要单独封装传field的回调：

// 统一的表单change回调
const handleInputChange = (e) => {
  const { name, value } = e.target
  setObj(prevObj => ({...prevObj, [name]: value}))
}

组件绑定示例：

<input name="title" value={obj.title} onChange={handleInputChange} />
<textarea name="body" value={obj.body} onChange={handleInputChange} />

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