0
104
VistasDos variables de estado cambian pero solo quieren volver a renderizarse una vez
https://codesandbox.io/s/ancient-rain-19d4rb?file=/src/App.js
Creé un sandbox arriba para demostrar el problema que tengo. Juega con él y mira el código para ver qué está haciendo.
El lado izquierdo tiene selecciones para el 'modo de juego' y para cada modo de juego existen opciones 'opciones' en el lado derecho.
La llamada a la API requiere que se ingresen estos dos valores.
Cada vez que cambio la opción de la derecha, debería hacer una llamada a la API en Game.js. Si cambio el modo de juego de la izquierda, también debería cambiar automáticamente la opción de la derecha para que sea el índice 0. Con mi lógica actual, hace dos llamadas a la API cada vez que cambio el modo de juego, ya que también cambia la opción. (Mira la consola al cambiar de modo)
¿Cómo puedo cambiar el diseño o cómo puedo ajustar las cosas para obtener el resultado que estoy buscando?
Déjame saber si se necesita más aclaración.
1 Respuestas
Responde la pregunta0
El problema es que tiene dos elementos de estado que dependen el uno del otro, siendo observados de forma independiente por otro objeto que provoca llamadas useEffect innecesarias. Una forma de resolver esto es crear otro objeto de estado que combine el modo de juego y la option y hacer que gamemode observe Game.js este objeto. De esta manera, puede agregar su propia lógica personalizada para dictar exactamente cuándo se debe llamar a la API.
Aquí hay un sandbox con la solución implementada: https://codesandbox.io/s/dazzling-galileo-sj29fh?file=/src/App.js
El primer useEffect depende de la option e inmediatamente actualiza el objeto del game cuando se cambia. El segundo useEffect depende del modo de gamemode y primero verifica si la option debe actualizarse al índice 0; de lo contrario, actualiza el game directamente.