javascript - react 令人讨厌的错误，我无法弄清楚

Question

我对 React 很陌生，试图开发一个带有问题的测验，我有测验组件，它接收带有问题的 Json 数组。这是测验类(class):

class Quiz extends Component {

  constructor(props){
    super(props);
    this.state={
      questions: this.props.jsonArray,
      score: 0,
      currentQuest: 0,
      guessedAnswer:'',
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange= this.handleChange.bind(this);
  }

  handleSubmit(event){
    console.log("In parent submited");
    let correct_answer= this.state.questions[this.state.currentQuest].correct_answer;
    console.log("Correct answer is " + correct_answer);
    if(this.state.guessedAnswer===correct_answer){
      console.log('Correct answer');
      this.setState({score : this.state.score + 1});
    }
    console.log('Your score is ' + this.state.score);
    this.setState({currentQuest : this.state.currentQuest + 1});
    console.log("Current question is " + this.state.currentQuest);

  }

  handleChange(val){

    this.setState({guessedAnswer: val});
  }

  render(){
    return(
      <div>
        {this.state.currentQuest< this.state.questions.length ? <QuestComp question={this.state.questions[this.state.currentQuest]} onChangeValue={this.handleChange} onFormSubmit={this.handleSubmit}/> :null}
      </div>
    );

  }

}

它使用参数调用问题组件，即当前问题，这是问题组件:

class QuestComp extends Component{


  constructor(props){
    super(props);
    this.state={
      question: this.props.question,
      rerender: false
    }
    console.log('In constructor in question');
  }

  updateAnswer=(e)=>{
    console.log('changed ' + e.target.value);
    this.props.onChangeValue(e.target.value);
  }
  submitForm=(e)=>{
    e.preventDefault();
    this.setState({question : this.props.question});
    this.props.onFormSubmit(e);
  }


  render(){
    console.log("Rerender child" + this.props.question.question);
    let incorrect_answers=[];
    for(let i=0;i<this.state.question.incorrect_answers.length;i++){
      incorrect_answers.push(this.state.question.incorrect_answers[i]);
    }
    let randNum=Math.round(Math.random()* (incorrect_answers.length-1));
    let correct_answer=this.state.question.correct_answer;
    incorrect_answers.splice(randNum,0,correct_answer);
    return(

      <form onSubmit={this.submitForm}>

        <h2><p>{this.state.question.category}:</p></h2>
        <h3><p>The question is {this.state.question.question}</p></h3>

          {incorrect_answers.map((answer,i) => <div key={i}><input name="somename" onChange={this.updateAnswer} type="radio" key={i} value={answer} />{answer} </div>)}
          <input type="submit" className="btn btn-success" value="Submit"/>
        </form>
    );
  }
}

这个想法很简单，每次用户提交表单时，我都会增加 currentQuestion 状态并将下一个问题传递给 QuestComp 来显示它，问题是第一次我实际上必须单击提交按钮两次才能转到下一个问题，它只是不渲染它，当我将 console.log 放入 QuestComp 渲染方法以查看它收到的问题时，实际上它是正确的，它只是不显示它我不知道为什么，所以第一次我必须按两次提交按钮转到下一个问题，之后工作正常，按一下并呈现下一个问题，知道为什么吗？

Answer 1

主要问题与 QuestComp 中的问题状态与从 Quiz 传递的问题 Prop 不同步有关。

直接使用从 Quiz 传递的 props，而不是将 props 设置为 QuizComp 中的状态。将 props 设置为这样的状态是一种反模式并且容易出错。

因此，要解决此问题，只需将 QuestComp 中的所有 this.state.question 替换为 this.props.question 即可。