React代码`skills: { ...this.state.skills, [name]: checked }`含义咨询

代码功能解释 #

这行代码的作用是不可变更新React state中存储的skills对象，在不直接修改原state的前提下，更新对应技能的勾选状态，保证组件可以正常触发重渲染。

关键语法拆解 #

1. ...this.state.skills是对象扩展运算符，作用是把当前skills里所有已有的键值对完整复制到新生成的对象中，保留未修改的技能状态。
2. [name]: checked是JS的计算属性名语法，作用是动态修改新对象中对应键的值：
   • 这里的name是触发change事件的复选框的name属性值，和skills对象里的键名（html/css/javascript）一一对应
   • 方括号[]包裹变量的写法，会自动把变量的实际值作为对象的键
   • checked是当前复选框的布尔型勾选状态，勾选为true，取消勾选为false

完整执行逻辑举例 #

假设你点击了绑定name="html"的复选框，勾选状态为true：

1. 先复制原skills对象得到{ html: false, css: false, javascript: false }
2. 计算属性[name]解析为html，对应赋值为true，最终新的skills对象为{ html: true, css: false, javascript: false }
3. 把这个新对象通过setState更新到state中，React检测到状态变化就会触发重渲染。

这种写法完全符合React状态不可变更新的要求，避免直接修改原state导致的更新异常问题。

内容的提问来源于stack exchange，提问作者Phucq.ins