Estoy haciendo un juego de matemáticas y me gustaría que el rango de los operandos se actualice después de una cierta cantidad de preguntas. Tengo este código para establecer la dificultad.
const [difficulty, setDiff] = useState({rangeA:[1, 10], rangeB:[1, 10]}); function setDifficulty(op) { let rangeA = []; let rangeB = []; if (question < 5) { //question state is incremented everytime the answer is correct, which triggers the next question rangeA = [0, 100]; rangeB = [0, 10]; } else if (question < 8) { rangeA = [0, 100]; rangeB = [0, 100]; } setDiff({...difficulty, rangeA, rangeB}); console.log(rangeB, difficulty.rangeB); // when question is 5, this logs [0, 100] [0, 10], but they should be the same value [0,100] }pero el estado no se actualiza correctamente, que puede estar pasando?
Establecer el estado en React actúa como una función asíncrona.
Lo que significa que cuando configura el estado y coloca un console.log justo después, es probable que se ejecute antes de que el estado haya terminado de actualizarse.
Es por eso que tenemos useEffect , un enlace React incorporado que activa una devolución de llamada cuando una de sus dependencias ha cambiado.
Ejemplo:
useEffect(() => { console.log(difficulty) // Whatever else we want to do after the state has been updated. }, [difficulty]) Este console.log se ejecutará solo después de que el estado haya terminado de cambiar y se haya producido un procesamiento.
Consulte la documentación para obtener más información.
Cuando llamas a setDiff , el nuevo valor de difficulty se actualizará durante el próximo renderizado. Dado que está iniciando sesión en console.log dentro de la función setDifficulty , antes de que ocurriera el renderizado, la referencia a difficulty.rangeB aún mantiene el valor antes de la actualización.