状态的单个功能更改没有多个状态惠特类似名称

Question

我正在尝试在多个状态下为状态更改创建一个函数...

我在constructor()

中具有以下状态

this.state={
  answer1:"",
  answer2:"",
  answer3:"",
  answer4:"",
  answer5:"", 
  //answerN... (25 to be exact)
}

我有一个问题组件，该问题是<p>标签和6个收音机按钮

我制作了5个实例

<Question addAnswer={this.addAnswer} title="...." />
<Question addAnswer={this.addAnswer} title="..." /> 
....

每个调用名为addAnswer()

的相同功能

addAnswer = (answerValue) => {
  this.setState({answer1:answerValue},()=>console.log(this.state.answer1))
}

此功能将仅更改answer1 state

所以如何使其像这样工作

addAnswer = (answerNumber,answerValue) => {
    this.setState({ answer + answerNumber: answerValue },()=>console.log(this.state.answer + answerNumber))
}

功能是这样的吗？

是否有一个选项使答案状态为数组，我将如何确定该数组的哪个索引并以后更改？？？

Answer 1

我建议您在某些数据阵列上进行迭代，例如标题：

someArray.map((title, i) => (
   <Question addAnswer={() => this.addAnswer(answerValue, i)} title={title} />
);

然后，您将能够在指定的索引i上引用一个项目。

addAnswer = (answerValue, i) => {
  this.setState({ `answer${i}`: answerValue });
};

注意：您没有从 answerValue prop来自 i的何处指定从 0开始。

Answer 2

我更喜欢将属性的全名作为参数传递给函数，而不仅仅是数字。我认为它看起来更可读和易于理解。

这样：

addAnswer = (answerCode, answerValue) => {
    this.setState({ [answerCode]: answerValue }, () => 
        console.log(this.state[answerCode])
    )
}

如果我是你，我可能会更改结构以看起来像这样：

{ 
    "answers": {
        1: {
            "code": 1,
            "value": "Yes"
        }
    }
}

然后，当您将值传递给还原器时，您可以传递整个答案对象：

{
    "code": 2,
    "value": "No"
}

并添加一个新答案：

addAnswer = (answer) => {
    this.setState({ [answer.code]: answer })
}