时间戳

首页 > 解决方案 > IonChange 上的 Ionic React IonRadioGroup 无限循环

reactjs - IonChange 上的 Ionic React IonRadioGroup 无限循环

问题描述

每当我在组件更新上设置单选按钮组的值时，我都会得到一个无限循环，我正在开发一个让我卡在这里的测验应用程序是我当前的代码，我想要一个用户已经解决的情况一个测验问题 导航到该问题时应该已经选择了答案

xport default class SubjectQuiz extends React.Component <IProps, IState>{

  constructor(props: IProps) {
    super(props);
    this.state = { userSelectedAnswers:[], score: 0,curNum:0,
      quizOver:false,
      Questions:this.props.Question,
      selected:'',
      currentSelectedIndex:{questionNumber:0,
        option:'',
        //index:string|number,
        answerIsCorrect:false,
        answer:''}};
   

  }
componentDidUpdate(){
      
      
      var i = this.state.userSelectedAnswers.findIndex(o => o.questionNumber === this.state.curNum);
      console.log("the value of question index in array "+i);
      
      if(i==-1){
        
        this.setState({selected:'F'})
      }else{

        
        this.setState({selected:this.state.userSelectedAnswers[i].correctAnswerOption})


     
    }


  }

这里是 TSX

<IonRadioGroup value={this.state.selected}  onIonChange={e=>{

          this.setState({selected:e.detail.value})
         this.answerSelected(this.state.selected);


          console.log("here is the selected answer "+JSON.stringify(e.detail));
          
          
      }}> 

       <IonList>
      

        <IonItem>
         <p dangerouslySetInnerHTML={{__html: this.parseHtmlString(this.state.Questions[this.state.curNum].option_a,this.ImageUrl).outerHTML}}></p>
          <IonRadio slot="start" value="A"   />
        </IonItem>

        <IonItem>
         <p dangerouslySetInnerHTML={{__html: this.parseHtmlString(this.state.Questions[this.state.curNum].option_b,this.ImageUrl).outerHTML}}></p>
          <IonRadio slot="start" value="B" />
        </IonItem>

        <IonItem>
         <p dangerouslySetInnerHTML={{__html: this.parseHtmlString(this.state.Questions[this.state.curNum].option_c,this.ImageUrl).outerHTML}}></p>
          <IonRadio slot="start" value="C" />
        </IonItem>

        <IonItem>
          <p dangerouslySetInnerHTML={{__html: this.parseHtmlString(this.state.Questions[this.state.curNum].option_d,this.ImageUrl).outerHTML}}></p>
          <IonRadio slot="start" value="D" />
        </IonItem>

        {this.state.Questions[this.state.curNum].option_e?
        <IonItem>
          <p dangerouslySetInnerHTML={{__html: this.parseHtmlString(this.state.Questions[this.state.curNum].option_e,this.ImageUrl).outerHTML}}></p>
          <IonRadio slot="start" value="E" />
        </IonItem>:null}
        <IonRadio slot="start" value="F" defaultChecked={true} hidden={true} />
        </IonList>
        
      </IonRadioGroup>

标签： reactjsionic-framework

解决方案

正如您在react doc中看到的防止无限循环的那样，您应该将 prevState 与当前状态进行比较，然后进行更改：

componentDidUpdate(prevProps,prevState){
  // Typical usage (don't forget to compare props):
  if (this.state.selected!== prevState.selected) {
    var i = this.state.userSelectedAnswers.findIndex(o => o.questionNumber === this.state.curNum);
    console.log("the value of question index in array " + i);
    if (i == -1) {
      this.setState({ selected: 'F' })
    } else {
      this.setState({ selected: this.state.userSelectedAnswers[i].correctAnswerOption })
    }
  }
}

推荐阅读