React中setState更新动态状态时为何用方括号包裹e.target.name

你在setState中看到的包裹e.target.name的方括号，是JavaScript ES6标准引入的对象计算属性名原生语法，并非React框架的特殊规则，是JS对象字面量的基础语法要求。

为什么不能去掉方括号 #

JS解析对象字面量时，对冒号左侧的键名有明确的解析规则：

• 如果键名位置没有方括号包裹，解析器会直接把内容当成固定的静态键名，只接受合法标识符、字符串字面量、数字字面量三类写法。直接写{ e.target.name: e.target.value }时，e.target.name是属性访问表达式，不属于合法的静态键名格式，代码在解析阶段就会直接抛出语法错误。
• 就算你给这个键加引号写成{ "e.target.name": e.target.value }，逻辑也完全不符合需求：这会给state新增一个键名本身就是e.target.name的属性，根本不会匹配到你预先在state里定义的userid、title、body字段。

方括号的实际作用 #

给键位置的表达式套上方括号，即{ [表达式]: 值 }的写法，相当于显式告诉JS解析器：

不要把方括号里的内容当固定键名，先执行括号内的代码拿到运行时的求值结果，再把这个结果作为对象的实际键名。

对应你代码的运行逻辑 #

你给三个输入框分别配置了和state字段一一对应的name属性，配合计算属性语法就能实现单函数复用处理所有表单更新：

• 操作UserId输入框时，e.target对应当前的userid输入框，e.target.name求值得到字符串"userid"，最终传入setState的对象等价于{ userid: 输入值 }，精准更新state里的userid字段
• 操作Title输入框时，e.target.name求值得到"title"，传入的对象自动变为{ title: 输入值 }，更新对应title字段
• 操作body输入框时逻辑完全一致，自动匹配更新body字段

如果不用这个语法，你就得为三个输入框分别写三个独立的change处理函数，代码会冗余很多。

注意区分相似语法 #

你代码里写的console.log([e.target.name])和对象计算属性的方括号不是同一个语法：这里的方括号是数组字面量标识，作用是把e.target.name的结果包装成一个长度为1的数组打印，只是符号和计算属性的方括号相同，二者的作用场景和逻辑完全无关。

// 错误写法1：直接语法报错
this.setState({
  e.target.name: e.target.value
})

// 错误写法2：语法不报错，但逻辑错误，会生成名为"e.target.name"的冗余state字段
this.setState({
  "e.target.name": e.target.value
})

// 正确写法：动态计算键名，匹配对应state字段
this.setState({ 
  [e.target.name]: e.target.value 
})

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