时间戳

首页 > 解决方案 > 在渲染方法中设置状态 - Reactjs

reactjs - 在渲染方法中设置状态 - Reactjs

问题描述

我有一个包含几个问题的表格。有些问题有一组子问题。这些是使用以下代码呈现的。

    {
  Object.keys(this.props.moduleDetails.questions).map((questionInfo, index) => (
    <div key={index}>
      <QuestionAnswers
        questionInfo={this.props.moduleDetails.questions[questionInfo]}
        generateStepData={this.props.generateStepData}
        states={this.props.states}
        userEnteredValues={this.props.formValues}
        errors={this.props.errors}
        setQuestionAnswers={this.setQuestionAnswers}
      />
      {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}
    </div>
  ))
}

如您所见，问题组是使用 renderQuestionGroup(questionInfo) 方法呈现的。

renderQuestionGroup(questionInfo) {
    let input = [];
    this.state.groupedQuestions[questionInfo] = (this.state.groupedQuestions[questionInfo]) ?
                    this.state.groupedQuestions[questionInfo]
                    : [];
    let answerId = this.props.formValues[questionInfo];
    let groupedQuestions = this.props.moduleDetails.questions[questionInfo].question_group[answerId];
    if((groupedQuestions != null && this.state.groupedQuestions[questionInfo].length == 0) || this.state.isAddPressed) {
        this.state.groupedQuestions[questionInfo].push(groupedQuestions);

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

这里的问题是我不能在这个方法中设置状态，因为这个方法在渲染方法中被调用

关于如何解决这个问题的任何想法？

有没有其他方法可以解决这个问题？

标签： reactjs

解决方案

您不能在渲染函数中设置状态，因为它会导致副作用。

确切的情况是，每次更新状态时，react 都会调用渲染函数，因此如果您要在渲染函数中更新状态，那么它将卡在无限循环中。

一般来说，这绝不应该发生；您不应该做任何与在渲染函数中修改任何组件状态相关的远程操作。

推荐阅读