Question

我必须基于单选按钮的选择来动态呈现输入表单。我有一个数组，每当用户选择一个单选按钮时，该数组就会增加。问题是：我将一个对象附加到数组，然后尝试将该数组映射到render（）函数。该地图显然忽略了我插入的对象。

选择单选按钮代码：

<MDBInput
    onClick={() => {
        let dependentFullName = dependent.dependentFullName;
        let dependentAnswerList = this.state[dependentFullName];
        let newQuestionData = {
            question: thing.pergunta,
            answer: true,
            answerRaised: true,
            info: ''
        };

        dependentAnswerList[thing.pergunta] = newQuestionData;
        this.setState({
            [dependentFullName]: dependentAnswerList
        })
    }}

    checked={this.state[dependent.dependentFullName][thing.pergunta] ? this.state[dependent.dependentFullName][thing.pergunta]["answer"] ? true : false : false}
    label='Sim'
    type='radio'
    id={"holder." + thing.pergunta}
/>

地图渲染代码原型：

{this.state.holder.map((question) => (<React.Fragment>
<h5>{question}</h5> <h5>{question.question}</h5></React.Fragment>))}

Answer 1

尝试使用突变数组的新引用设置状态：

this.setState({
  [dependentFullName]: [...dependentAnswerList]
});

状态更改时，react与上一个进行浅比较，在您的情况下，它具有相同的引用，因此不会触发渲染。

What does setState do?。

setState()计划对组件状态对象的更新。 状态更改时，组件通过重新渲染进行响应。

来自setState API：

保证更新器功能接收到的状态和道具都是最新的。更新器的输出与状态浅合并。

可能的完整修补程序如下所示：

const onClick = () => {
  const dependentFullName = dependent.dependentFullName;
  const dependentAnswerList = this.state[dependentFullName];
  const newQuestionData = {
    question: thing.pergunta,
    answer: true,
    answerRaised: true,
    info: ''
  };
  this.setState({
    [dependentFullName]: {
      ...dependentAnswerList,
      [thing.pergunta]: newQuestionData
    }
  });
};
<MDBInput onClick={onClick} {...rest}/>;

反应不映射数组中的某些对象

1 个答案: