检测分组问题的handleChange - Reactjs答案

【问题标题】：Detect handleChange of grouped questions - Reactjs检测分组问题的handleChange - Reactjs
【发布时间】：2018-07-09 08:00:11
【问题描述】：

我有一个包含几个问题的表格。有些问题包含一组子问题。

{
  (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 是显示子问题的方法。

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 期间处于状态。

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

这很好用，问题最初可以正确加载。问题是在每个 handleChange 事件期间，方法 componentDidUpdate 都会被触发，最终导致再次呈现问题。

我不希望在 handlechange 事件期间调用 componentDidUpdate 方法。关于如何解决这个问题的任何想法？

PS：我的想法是比较 prevProps 和 this.props。如果两者不相同，则为句柄更改事件。但问题是，如果我删除条件

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

我在初始加载期间遇到无限循环。所以我需要的如下。

在 componentDidUpdate 方法中检测 handleChange。
最初正确渲染的问题。目前，如果我删除 if (prevProps !== this.props) { ...} 条件，我会得到一个无限循环。

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs

【解决方案1】：

componentDidUpdate 会在每次状态更改时触发，这就是为什么在此处设置状态时会出现无限循环的原因。

如果您的新数据来自 props，则将此逻辑移动到 getderivedstatefromprops（或 componentWillReceiveProps，如果您使用低于 v16.3 的较低版本的 react）。

getderivedstatefromprops

componentWillReceiveProps

至于handle的改变只需要在handler内部设置状态即可，不需要监听componentDidUpdate的变化。

【讨论】：