React嵌套对象状态更新问题：如何独立存储各问题用户答案

你的核心问题在于当前的State结构没有区分不同问题的答案——不管切换到哪个问题，你都在覆盖同一个selectedAnswer字段，所以切换问题后自然会保留上一次的值。不用提前初始化所有问题对象，我们可以通过调整State结构来高效实现每个问题答案的独立存储：

1. 调整初始State结构 #

把原来的questions字段改成一个以问题标识（索引或id）为键、答案为值的对象，命名为answers更语义化，初始时是空对象，不需要提前填充任何内容：

class Test extends Component {
  state = {
    activeQuestion: 0,
    answers: {} // 空对象，用户选择后才会添加对应键值对
  }
}

2. 修改选项选择的回调函数 #

使用函数式更新（因为State更新是异步的，依赖之前的State时更安全），根据当前活跃的问题标识，把答案存入对应的键中，而不是覆盖整个对象：

handleOptionSelect = (option) => {
  this.setState(prevState => ({
    answers: {
      ...prevState.answers, // 保留已有的所有答案
      [prevState.activeQuestion]: option.value // 更新当前活跃问题的答案
    }
  }))
}

这里的[prevState.activeQuestion]是ES6的计算属性名，会把当前活跃问题的索引（如果你的问题有唯一id，用id替换索引会更稳定，比如prevState.activeQuestionId）作为对象的键，存储对应的选中答案。

3. 渲染时获取当前问题的答案 #

当渲染当前Question组件时，从answers对象中读取对应问题的答案即可，如果用户还没选过，就用空字符串作为默认值：

// 假设你有一个questions数组存储所有问题数据
const currentQuestion = this.props.questions[this.state.activeQuestion];
const currentAnswer = this.state.answers[this.state.activeQuestion] || '';

// 把currentAnswer传给Question组件，用于回显选中状态
<Question 
  question={currentQuestion}
  selectedAnswer={currentAnswer}
  onSelect={this.handleOptionSelect}
/>

为什么这个方案高效？ #

• 不需要提前初始化所有问题的答案对象，只有用户实际选择了某个问题的答案，才会在answers对象中添加对应的键值对，完全避免了不必要的初始化开销。
• 每个问题的答案通过唯一标识绑定，切换问题时不会互相干扰，完美实现独立存储。

如果你的问题有唯一的id字段，建议用id代替索引作为answers对象的键——这样即使问题列表的顺序发生变化，答案也不会和错误的问题绑定，稳定性更高。

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