gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 14:30:51 31 4
gpt4 key购买 nike

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

    {
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;
}
这里的问题是我不能在这个方法中设置状态,因为这个方法在 render 方法中被调用
关于如何解决这个问题的任何想法?
有没有其他方法可以解决这个问题?

最佳答案

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

真正发生的事情是每次更新状态时,react 都会调用渲染函数,所以如果你在渲染函数中更新状态,那么它就会陷入无限循环。

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

关于reactjs - 在渲染方法中设置状态 - Reactjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51189542/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com