Question

我无法理解React中的状态变化。

我们说我有一个包含问题的测试组件，每个问题都有用户选择的答案。如上所述：

handleOptionSelect = (option) => {
  this.setState({
    ...this.state, 
      questions: {
        selectedAnswer: option.value
      }
    })
  }

在应用程序中，一次只呈现一个问题。我想将每个用户答案存储在Test状态。对于选择过程，我的回调是：

class Test extends Component {
  state = {
    activeQuestion: 0
    questions: {
      {id: 1, selectedAnswer: 'B'},
      {id: 2, selectedAnswer: 'C'},
      {etc},
      {etc}
    }
  }

当我遇到特定问题时，选择一个选项会正确更新状态。但是，每当我选择不同的问题（将activeQuestion设置为不同的数字）时，selectedAnswer值仍然存在。如何确保状态更改保留在父对象中？

编辑（提供更多上下文）：我假设我可以初始化初始状态中的所有问题对象，如下所示，但这似乎耗时且效率低下。在此先感谢，所有

onMouseClicked

Answer 1

虽然我并非100％确定我理解你的要求，但你可以这样做。

具有空对象的初始state.questions

class Test extends Component {
  state = {
    activeQuestion: 0,
    questions: {
    }
  }

然后，当您需要更新活动问题时，您选择了答案

handleOptionSelect = (option) => {
  // it is better to pass a callback if your next state
  // depends on previous state due to async nature of setState

  this.setState(state => ({
    ...state,
    questions: {
      ...state.questions, // keep answers for "non active" questions
      [state.activeQuestion]: option.value // update only active question
    }
  }))
}

无法在React中更新嵌套对象的状态

1 个答案: