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

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

像这样：

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

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

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

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

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

并添加一个新答案：

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

Answer 2

我建议你迭代一些数据数组，例如标题：

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

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

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

注意：您没有指定answerValue道具来自i的{{1}}来自0。

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

2 个答案: