React中解构与状态的概念理解：为何设置状态时name需用方括号

问题 #

以下代码运行正常，但想理解：从e.target解构出name和value后，设置表单数据时为何需要将name用方括号包裹，而不能直接使用变量名？

function handleChange(e) {
  const { name, value } = e.target;
  setFormData({ ...formData, [name]: value });
}

解答 #

这本质是JavaScript对象字面量里静态属性名和计算属性名的区别：

• 要是直接写name: value，这里的name是固定的字符串键名——不管变量name实际存的是什么值，最终只会给对象添加/更新名为"name"的属性。比如输入框的name属性是"username"，这么写只会把formData.name改成输入值，根本没法更新我们需要的formData.username，完全达不到动态匹配表单字段的目的。

• 用方括号包裹[name]时，这是ES6引入的计算属性名语法：它会把变量name的实际值当成对象的键名。比如变量name的值是"email"，那[name]: value就等价于"email": value，这样就能精准对应到表单输入框的name属性，动态更新formData里对应的字段。

说白了，方括号的作用就是让你用变量的值来动态指定对象的属性名，而不是把变量名本身当成属性名。

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