Reactjs 如何使用componentDidMount重置状态？

我是一个反应新手，我正在做一个测验。我现在想做的是，当你遇到一个新问题时，将类名重置为它的初始状态。我想我想使用componentDidUpdate，但不确定它是如何工作的

  componentDidUpdate() {
    this.setState({
      classNames: ["", "", "", ""]
    });
  }

以下是完整的组件代码：

class Answers extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isAnswered: false,
      classNames: ["", "", "", ""]
    };

    this.checkAnswer = this.checkAnswer.bind(this);
  }

  checkAnswer(e) {
    let { isAnswered } = this.props;

    if (!isAnswered) {
      let elem = e.currentTarget;
      let { correct, increaseScore } = this.props;
      let answer = Number(elem.dataset.id);
      let updatedClassNames = this.state.classNames;

      if (answer === correct) {
        updatedClassNames[answer - 1] = "right";
        increaseScore();
      } else {
        updatedClassNames[answer - 1] = "wrong";
      }

      this.setState({
        classNames: updatedClassNames
      });

      this.props.showButton();
    }
  }

  componentDidUpdate() {
    this.setState({
      classNames: ["", "", "", ""]
    });
  }

  render() {
    let { answers } = this.props;
    let { classNames } = this.state;

    return (
      <div id="answers">
        <ul>
          <li onClick={this.checkAnswer} className={classNames[0]} data-id="1">
            <p>{answers[0]}</p>
          </li>
          <li onClick={this.checkAnswer} className={classNames[1]} data-id="2">
            <p>{answers[1]}</p>
          </li>
          <li onClick={this.checkAnswer} className={classNames[2]} data-id="3">
            <p>{answers[2]}</p>
          </li>
          <li onClick={this.checkAnswer} className={classNames[3]} data-id="4">
            <p>{answers[3]}</p>
          </li>
        </ul>
      </div>
    );
  }
}

export default Answers;

类答案扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
我回答：错，
类名：[“”、“”、“”、“”、“”]
};
this.checkAnswer=this.checkAnswer.bind（this）；
}
核对答案（e）{
设{isAnswered}=this.props；
如果（！isAnswered）{
设elem=e.currentTarget；
让{correct，increaseScore}=this.props；
让答案=编号（elem.dataset.id）；
让updatedClassNames=this.state.classNames；
如果（答案===正确）{
updatedClassNames[答案-1]=“正确”；
增加分数（）；
}否则{
updatedClassNames[answer-1]=“错误”；
}
这是我的国家({
类名：更新的类名
});
this.props.showButton（）；
}
}
componentDidUpdate（）{
这是我的国家({
类名：[“”、“”、“”、“”、“”]
});
}
render（）{
设{answers}=this.props；
让{classNames}=this.state；
返回(


{答案[0]}



{答案[1]}



{答案[2]}



{答案[3]}



);
}
}
导出默认答案；

感谢您的帮助！由于我正在学习，所以对整个代码项目的反馈也非常感谢

以下是完整项目的链接：

---

问题在于，如果您更改

componentdiddupdate

中的状态，它将立即触发另一个更新，因此再次运行

componentdiddupdate

，并导致无限循环。因此，您应该将

设置状态

移动到其他地方，或者将其置于条件之后。e、 g:

componentDidUpdate() {
  if (!this.state.classNames.every(className => className === "") { // Check if there is an item in the array which doesn't match an empty string ("")
    this.setState({ // Only update state if it's necessary
      classNames: ["", "", "", ""]
    });
  }
}

---

您可以找到更新的代码沙盒

问题是，如果您在

componentdiddupdate

中更改状态，它将立即触发另一个更新，因此再次运行

componentdiddupdate

，并导致无限循环。因此，您应该将

设置状态

移动到其他地方，或者将其置于条件之后。e、 g:

componentDidUpdate() {
  if (!this.state.classNames.every(className => className === "") { // Check if there is an item in the array which doesn't match an empty string ("")
    this.setState({ // Only update state if it's necessary
      classNames: ["", "", "", ""]
    });
  }
}

---

您可以找到更新的代码沙盒

首先，您必须添加一个按钮来重置类名称，该按钮将调用一个函数来重置它们，如：

从“React”导入React；
类。组件{
建造师（道具）{
超级（道具）；
此.state={
我回答：错，
类名：[“”、“”、“”、“”、“”]
};
}
检查答案=e=>{
设{isAnswered}=this.props；
如果（！isAnswered）{
设elem=e.currentTarget；
让{correct，increaseScore}=this.props；
让答案=编号（elem.dataset.id）；
让updatedClassNames=this.state.classNames；
如果（答案===正确）{
updatedClassNames[答案-1]=“正确”；
增加分数（）；
}否则{
updatedClassNames[answer-1]=“错误”；
}
这是我的国家({
类名：更新的类名
});
this.props.showButton（）；
}
};
重置=（）=>{
这是我的国家({
我回答：错，
类名：[“”、“”、“”、“”、“”]
});
};
render（）{
设{answers}=this.props；
让{classNames}=this.state；
返回(
重置


{答案[0]}



{答案[1]}



{答案[2]}



{答案[3]}



);
}
}
导出默认答案；

首先，您必须添加一个按钮来重置类名，该按钮将调用一个函数来重置类名，如下所示：

从“React”导入React；
类。组件{
建造师（道具）{
超级（道具）；
此.state={
我回答：错，
类名：[“”、“”、“”、“”、“”]
};
}
检查答案=e=>{
设{isAnswered}=this.props；
如果（！isAnswered）{
设elem=e.currentTarget；
让{correct，increaseScore}=this.props；
让答案=编号（elem.dataset.id）；
让updatedClassNames=this.state.classNames；
如果（答案===正确）{
updatedClassNames[答案-1]=“正确”；
增加分数（）；
}否则{
updatedClassNames[answer-1]=“错误”；
}
这是我的国家({
类名：更新的类名
});
this.props.showButton（）；
}
};
重置=（）=>{
这是我的国家({
我回答：错，
类名：[“”、“”、“”、“”、“”]
});
};
render（）{
设{answers}=this.props；
让{classNames}=this.state；
返回(
重置


{答案[0]}



{答案[1]}



{答案[2]}

{
    id: 1
    question: 'What does CSS stand for?',
    answers: [...],
    correct: 3
},
{
    id: 2,
     ....
}

componentDidUpdate(prevProps) {
  if (this.props.question !== prevProps.question) {
    this.setState(....)
  }
}

   componentDidUpdate(prevProps) {
      if (this.props.questions !== prevProps.questions) {
          const shuffledAnswerOptions = this.props.questions.map(question =>
          question.answer_options && 
            this.shuffleArray(question.answer_options)
          );

           this.setState({
              current_question:this.props.questions && 
               this.props.questions[0],
               question_image_url: this.props.questions && 
               this.props.questions[0] && 
             this.props.questions[0].question_image_url,
           answerOptions: shuffledAnswerOptions[0],
         numberOfQuestions: this.props.questions && 
          this.props.questions.length
          });
       }
     }

componentDidUpdate(prevProps, prevState) {
      if(this.state.assignment !== prevState.assignment){
        document.getElementById(prevState.assignment.id) && document.getElementById(prevState.assignment.id).classList.remove("headactiveperf");
      }
      if(this.state.assessment !== prevState.assessment){
        document.getElementById(prevState.assessment.id) && document.getElementById(prevState.assessment.id).classList.remove("headactiveperf");
      }
      if(this.state.study_group_id !== prevState.study_group_id){
        document.getElementById(prevState.study_group_id) && document.getElementById(prevState.study_group_id).classList.remove("klassactiveperf");
      }
  }