los valores de valor 1 y 2 y 3 que se almacenan en los accesorios son Math.floor (Math.random() * 100), entonces, lo que quiero saber cuando configuro State y el valor de numQuestions, numCorrect cambia y el método de representación está siendo Llamé porque sé por qué este renderizado no hizo que los tres valores 1,2,3 se reprodujeran nuevamente y sus valores cambiaran con cada clic de los dos botones.
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;Su componente se vuelve a renderizar cuando cambia el estado. Sin embargo, sus accesorios no cambian porque no está pasando nuevos accesorios del componente principal, por lo que value1 , value2 y value3 siguen siendo los mismos.
Si desea que sus value cambien en un cambio de estado, un enfoque es mover todos sus value al estado, inicializarlos cuando el componente se monte y actualizarlos cuando su componente se actualice:
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 }); };Las funciones de flecha no tienen this enlace (más información aquí ). También los está llamando al this.falseanswer clic en el button con onClick . Entonces, la clase no puede encontrar el enlace y, por lo tanto, la función no devuelve nada porque es como si no existiera. Además, cuando pasamos funciones a controladores de eventos y las funciones no tienen argumentos, la mejor práctica es simplemente pasar la función de esta manera: onClick={myFunciton} .
Entonces, en su caso, convertiría estas funciones de flecha en métodos, las vincularía al constructor y las llamaría en el evento 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> ); }