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>
        );
    }
}