为什么当状态改变时我的组件没有重新渲染？

Question

---

存储在道具中的值 1 和 2 和 3 的值是 Math.floor(Math.random() * 100) 所以我想知道什么时候我 setState 和 numQuestions 的值， numCorrect 变化和渲染方法是因为我知道为什么这个渲染没有使三个值 1,2,3 再次被复制并且它们的值随着两个按钮的每次单击而改变，所以称为。

class App extends Component {
      constructor(props) {
      super(props)
      this.proposedAnswer = Math.floor(Math.random() * 3) + this.props.value1 + this.props.value2 + this.props.value3;
      this.state = {
        numQuestions : 0,
        numCorrect : 0,
      }
   }

   rightanswer= ()=> {
        if(this.proposedAnswer === this.props.value1 + this.props.value2 + this.props.value3){
          this.setState((oldstate)=> ({
            numCorrect : oldstate.numCorrect +=1 ,
            numQuestions : oldstate.numQuestions += 1 ,
          }))
        }else{
             this.setState((oldstate)=> ({
             numQuestions : oldstate.numQuestions += 1 ,
         }))
     }
  }

   falseanswer= ()=> {
         if(this.proposedAnswer !== this.props.value1 + this.props.value2 + this.props.value3){
           this.setState((oldstate)=> ({
               numCorrect : oldstate.numCorrect +=1 ,
               numQuestions : oldstate.numQuestions += 1 ,
           }))
         }else{
               this.setState((oldstate)=> ({
               numQuestions : oldstate.numQuestions += 1 ,
         }))
        }
      }

   render() {
      return (
          <div className="App">
            <div className="game">
              <h2>Mental Math</h2>
              <div className="equation">
                  <p className="text">{`${this.props.value1} + ${this.props.value2} + 
                   ${this.props.value3} = ${this.proposedAnswer}`}</p>
              </div>
              <button  onClick={() => this.rightanswer()}>True</button>
              <button onClick={() => this.falseanswer()}>False</button>
              <p className="text">
                 Your Score: {this.state.numCorrect}/{this.state.numQuestions}
              </p>
             </div>
          </div>
       );
      }
    }

  export default App;

Answer 1

当状态改变时，你的组件会重新渲染。 但是，您的 props 不会更改，因为您没有从父组件传入新的 props，因此value1 、 value2和value3保持不变。

如果您希望您的value在状态更改时发生更改，一种方法是将所有value移动到状态，在组件挂载时初始化它们，并在组件更新时更新它们：

  constructor(props) {
    super(props);
    this.state = {
      numQuestions: 0,
      numCorrect: 0
    };
  }

  componentDidMount() {
    this.generateValues();
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.numQuestions !== prevState.numQuestions) {
      this.generateValues();
    }
  }

  generateValues = () => {
    const values = [...Array(3)].map(() => Math.floor(Math.random() * 100));
    const correctAnswer = values.reduce((a, b) => a + b, 0);
    const proposedAnswer = Math.floor(Math.random() * 3) + correctAnswer;
    this.setState({
      value1: values[0],
      value2: values[1],
      value3: values[2],
      correctAnswer: correctAnswer,
      proposedAnswer: proposedAnswer
    });
  };

Answer 2

箭头函数没有this绑定（更多信息在这里）。 您还使用this.falseanswer在button的onClick上调用它们。 因此该类找不到绑定，因此该函数不返回任何内容，因为它就像它不存在一样。 此外，当我们将函数传递给事件处理程序并且函数没有参数时，最佳做法是像这样传递函数： onClick={myFunciton} 。

因此，在您的情况下，我会将这些箭头函数转换为方法，在constructor函数中绑定它们并在onClick事件中调用它们

constructor(props) {
      super(props)
      this.proposedAnswer = Math.floor(Math.random() * 3) + this.props.value1 + this.props.value2 + this.props.value3;
      this.state = {
        numQuestions : 0,
        numCorrect : 0,
      }
      this.falseAnswer = this.falseAnswer.bind(this);
   }

  falseAnswer () { ...}

  render () {
   return (
   <button onClick={this.falseAnswer}>False</button>
   );
  }