React不会渲染数组的所有组件

Question

单击“添加”按钮后，我想动态添加组件。 为此，我创建了一个包含所有组件的数组，然后单击添加它们。

我的问题是，即使它包含多个组件，它也只能呈现一个组件。

我的代码如下所示：

class QuestionBlock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {answersArray: []};
    }

    addPossibleAnswer() {
        this.state.answersArray.push(
            <PossibleAnswers id={this.state.answersArray.length + 1}/>
        )
        this.forceUpdate();
    }

    componentWillMount() {
        this.state.answersArray.push(
            <PossibleAnswers id={this.state.answersArray.length + 1}/>
        )
    }

    render() {
        console.log(this.state.answersArray) // Grows after adding componenets, but they are not rendered.
        return (
            <div>
                {this.state.answersArray}
                <AddPossibleAnswer addPossibleAnswer={() => this.addPossibleAnswer()} />
            </div>
        );
    }
}

如果您发现我做错了，如果您能帮助我，我将非常高兴！

Answer 1

您不会像您那样与state互动。 切勿更改状态字段。 您需要使用this.setState ：

this.setState(prevState => ({answersArray: prevState.answersArray.concat([
      <PossibleAnswers id={prevState.answersArray.length + 1}])}));

话虽如此，将组件存储在状态中也很奇怪。 通常，您将存储数据并根据render方法中的数据创建组件。

Answer 2

与其直接更改状态并向其中添加JSX，不如将原始数据保留在状态中，然后从render方法中从该状态派生JSX。

例

class QuestionBlock extends React.Component {
  state = { answers: 1 };

  addPossibleAnswer = () => {
    this.setState(({ answers }) => ({ answers: answers + 1 }));
  };

  render() {
    return (
      <div>
        {Array.from({ length: this.state.answers }, (_, index) => (
          <PossibleAnswers key={index} id={index} />
        ))}
        <AddPossibleAnswer addPossibleAnswer={this.addPossibleAnswer} />
      </div>
    );
  }
}

Answer 3

您直接将元素推送到不带setState的数组中，因此该组件不会重新渲染

还应避免在应用程序中尽可能多地使用tthis.forceUpdate（），因为建议不要这样做

您需要像下面那样更改代码。 在react中处理数组的推荐方法是使用先前状态并推送到数组

addPossibleAnswer() {
       this.setState(prevState => ({
          answersArray: [...prevState.answersArray, <PossibleAnswers id={prevState.answersArray.length + 1}/>]
       }));
    }

componentWillMount() {
    this.setState(prevState => ({
          answersArray: [...prevState.answersArray, <PossibleAnswers id={prevState.answersArray.length + 1}/>]
       }));
}

还请记住，react 16中不建议使用componentWillMount生命周期方法。因此，请将代码移至componentDidMount

这是更正的代码

class QuestionBlock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {answersArray: []};
    }

    addPossibleAnswer() {
       this.setState(prevState => ({
          answersArray: [...prevState.answersArray, <PossibleAnswers id={prevState.answersArray.length + 1}/>]
       }));
    }

  componentDidMount() {
    this.setState(prevState => ({
          answersArray: [...prevState.answersArray, <PossibleAnswers id={prevState.answersArray.length + 1}/>]
       }));
  }

    render() {
        const { answersArray } = this.state;
        return (
            <div>
                {answersArray}
                <AddPossibleAnswer addPossibleAnswer={() => this.addPossibleAnswer()} />
            </div>
        );
    }
}