ReactJS中如何使用变量为嵌套state设置值？

我懂你的需求啦——就是想把输入框的name属性值当成userInfo对象的键，动态更新对应的state字段对吧？你之前的写法问题出在直接用.访问属性，这种方式会把stateChild当成字面量属性名，而不是你想要的变量值。

解决这个问题超简单，用ES6的计算属性名就能搞定，具体修改看下面：

方案一：分步更新写法 #

onChange = (e) => {
  const stateChild = e.target.name;
  // 先解构原有的userInfo，遵守React state不可变原则
  const updatedUserInfo = { ...this.state.userInfo };
  // 用方括号包裹变量，把变量的值作为键
  updatedUserInfo[stateChild] = e.target.value;
  // 正式更新state
  this.setState({ userInfo: updatedUserInfo });
  
  console.log(updatedUserInfo[stateChild]); // 现在能正确输出对应字段的值啦
}

方案二：更简洁的 setState 内联写法 #

onChange = (e) => {
  const { name, value } = e.target;
  this.setState(prevState => ({
    userInfo: {
      ...prevState.userInfo,
      [name]: value // 直接用name变量作为键赋值
    }
  }));
}

为啥原来的写法不行？ #

你之前写的userInfo.stateChild，JavaScript会把它解析成访问名为stateChild的固定属性，而不是把stateChild变量的实际值作为属性名。用方括号[]包裹变量后，JS会先计算变量的值，再用这个值去匹配对象的属性，这就是计算属性名的核心作用。

另外要记住，React的state是不可变的，所以每次更新都要先解构原对象生成新对象，不能直接修改原state里的内容哦。

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