React表单嵌套状态对象更新：如何正确重构状态对象

我来帮你解决这个React嵌套状态更新的问题，你的核心问题出在直接修改原state对象以及map函数返回值错误上，导致状态结构被破坏。让我们一步步拆解问题并修复：

问题分析 #

先看你原来的handleQuestionChange代码：

handleQuestionChange = (i) => (e) => {
 console.log(e.target.name, e.target.value, i)
 let stateCopy = Object.assign({}, this.state)
 const name = e.target.name
 const questions = stateCopy.questions.map((question, j) => (
 j === i ? question[name] = e.target.value : question[name] = question[name]
 ))
 console.log(stateCopy.questions, questions)
 stateCopy.questions = questions
 this.setState({questions: stateCopy.questions})
}

这里有两个致命问题：

1. map函数返回的是赋值结果而非对象：question[name] = e.target.value这个表达式的返回值是你赋的value（比如字符串"EKG4"），不是原question对象。所以第一次map后，questions数组里的元素从对象变成了字符串，第二次更新时自然找不到name属性，导致出现NaN的键。
2. 直接修改原state对象：Object.assign({}, this.state)只是浅拷贝state对象，但里面的questions数组还是原引用，你直接修改question[name]其实已经mutate了原state，这违反了React状态不可变的原则，会导致不可预测的bug。

你后来修改的代码错误地把整个question替换成了只包含name的新对象，自然会丢失description和options字段。

正确的状态更新写法 #

我们需要遵循React的不可变性原则，创建新的对象/数组来更新状态，同时用动态键名来更新对应字段：

handleQuestionChange = (i) => (e) => {
  const { name, value } = e.target;
  // 使用函数式更新，因为新状态依赖于旧状态
  this.setState(prevState => ({
    questions: prevState.questions.map((question, j) => {
      // 不是当前要修改的问题，直接返回原对象（或浅拷贝也可以）
      if (j !== i) return question;
      // 是当前要修改的问题，创建新对象，复制原有所有属性，再更新目标字段
      return {
        ...question,
        [name]: value // 动态键名，对应input的name属性
      };
    })
  }));
}

额外优化：把表单改成受控组件 #

你当前用的是defaultValue，这是非受控组件的写法，状态更新后input不会自动同步最新值。应该改成受控组件，用value绑定状态：

{this.state.questions.map((q, i) => (
 <div key={i}> {/* 记得加key，React列表渲染要求 */}
 <label>Question {i+1 + '.'}</label>
 <input 
   type="text" 
   placeholder={`Question #${i+1}`} 
   name="title" 
   value={q.title} {/* 绑定状态值 */}
   onChange={this.handleQuestionChange(i)} 
 />
 <button type="button" className="small">-</button>
 </div>
))}

关键知识点总结 #

• 不可变性：永远不要直接修改state里的对象/数组，要通过展开运算符...或Object.assign创建新对象来更新，这样React才能正确检测到状态变化并重新渲染。
• 函数式setState：当新状态依赖于旧状态时，一定要用函数式更新（setState(prevState => ...)），避免异步更新导致的状态不一致问题。
• 动态键名：ES6的方括号语法[name]可以让你根据变量名动态设置对象的键，完美适配表单中不同name属性的输入框。

这样修改后，你就能正确更新嵌套在数组中的question对象，同时保留所有原有字段，不会再出现结构破坏的问题了。

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