检测分组问题的处理更改-Reactjs

我有一张表格，里面有几个问题。有些问题包含一组子问题

{
  (this.props.moduleDetails.questions[questionInfo].question_group && this.props.moduleDetails.questions[questionInfo].has_grouped_questions === 1) ?
    <div className="sub-questions">
      {
        (this.props.moduleDetails.questions[questionInfo].question_group )  ?
          <span>
            { this.renderQuestionGroup(questionInfo) }
            <input type="button" onClick={(e) => { this.addQuestionGroup(questionInfo) }} value="Add" className="btn"/>
          </span>
          : null
      }
    </div>
    : null
}

renderQuestionGroup(questionInfo) {
    let input = [];

    input = this.display(questionInfo)
    return input;
  }

  display(questionInfo) {
      let input = [];
      this.state && this.state.groupedQuestions && this.state.groupedQuestions[questionInfo] && this.state.groupedQuestions[questionInfo].map(
        (qInfo, qIndex) => {
                  if(qInfo !== undefined) {

                    Object.keys(qInfo).map(
                      (questionInfo, index) => {
                        input.push(<QuestionAnswers
                                     questionInfo={qInfo[questionInfo]}
                                     generateStepData={this.props.generateStepData}
                                     userEnteredValues={this.props.formValues}
                                     key={qInfo[questionInfo].module_question_id+qIndex}
                                     groupIndex={qIndex}
                                />)
                  });
                }
      });
     return input;
  }

在初始加载期间，我得到一个无限循环。所以我需要的是如下

• 检测componentDidUpdate方法中的handleChange
• 最初要正确呈现的问题。当前，如果删除if（prevProps！==this.props）{…}条件，我将得到一个无限循环

---

任何帮助都将不胜感激。

componentdiddupdate

在状态每次更改时都会触发，这就是为什么在那里设置状态时可以得到无限循环的原因

如果您的新数据来自

props

，则将此逻辑移动到

getderivedstatefromprops

（或者

组件将接收props

，如果您使用的是低于v16.3的react的较低版本）

至于句柄更改，只需在处理程序内设置状态，无需侦听

componentdiddupdate

中的更改

componentDidUpdate = (prevProps, prevState, snapshot) => {
    console.log('prevProps----------->', prevProps);
    console.log('this.props----------->', this.props)
    if (prevProps !== this.props) {
      let questions = this.props.moduleDetails.questions,
          sgq       = {};

      Object.keys(questions).map((qId) => {
        sgq[qId] = (this.state.groupedQuestions[qId]) ? this.state.groupedQuestions[qId] : [];
        let answerId = this.props.formValues[qId],
            questionObj = questions[qId],
            groupedQuestions = [];
        if(questionObj.has_grouped_questions == 1 && answerId != null && (this.state.groupedQuestions != null)) {
          groupedQuestions = questions[qId].question_group[answerId];


          let loopCount = this.getLoopCount(groupedQuestions);

            for(let i=0; i<loopCount; i++) {
              sgq[qId].push(groupedQuestions);
            }
        }
      });
      this.setState({groupedQuestions: sgq});
    }
  }

if (prevProps !== this.props) {
  ...
}