Estoy trabajando en un proyecto de juego de memoria en React. Tengo una matriz de objetos pokemon (ya que los uso como entrada para el juego) y configuro el estado nextPokemon para que sea un objeto en un índice aleatorio en dicho pokemonsArray . Luego, estoy agregando el siguiente Pokémon a una matriz llamada renderizado de Pokémon, que asigno en la función de representación y creo un botón para cada uno de ellos. Ahora ya descubrí que si tengo varios configuradores de estado en un solo lugar, se agrupan en lotes y, por lo tanto, tiene sentido que mi matriz renderizada de Pokémon reciba un objeto vacío cuando le agrego nextPokemon , porque nextPokemon no ha sido evaluado todavía. Agregué mi código en la parte inferior, porque todavía tengo muchos problemas con él, que es:

a) entender por qué setNextPokemon no funciona, porque es el primer proceso en línea y ni siquiera depende del estado establecido previamente, por lo tanto, agruparlo junto con otros establecedores de estado no debería ser un problema

b) conocer cómo me ayudan las funciones de actualización ya que en setRenderedPokemon, usar, por ejemplo, "anterior => anterior + x" no ayuda; no confío en valores anteriores del mismo estado sino de otro estado

Puedes ver el código a continuación. Cualquier ayuda es apreciada.

 const [pokemonsArray, setPokemonArray] = useState(pokemons); const [score, setScore] = useState(0); const [renderedPokemon, setRenderedPokemon] = useState([]); const [nextPokemon, setNextPokemon] = useState({}); useEffect(() => { for (let i = 0; i < 9; i++) { if (score === 49) { return } else if (renderedPokemon.length == 0) { setNextPokemon(pokemonsArray[Math.floor(Math.random() * 49)]); setRenderedPokemon(nextPokemon); } } }