Estoy tratando de agregar una lista dentro de un estado usando el método set, pero mi estado permanece vacío
Aplicación.js
// Starts the screts word game const startGame = () => { // pick word and pick category const { word, category } = pickWordAndCategory(); // create array of letters let wordLetters = word.split(""); wordLetters = wordLetters.map((l) => l.toLowerCase()); // Fill states setPickedCategory(category); setPickedWord(word); setLettersList(wordLetters); console.log('wordLetters', wordLetters); console.log('lettersList', lettersList); setGameState(stages[1].name); }; const pickWordAndCategory = () => { // pick a random category const categories = Object.keys(words); const category = categories[Math.floor(Math.random() * Object.keys(categories).length)]; console.log('category', category); // pick a random word const word = words[category][Math.floor(Math.random() * words[category].length)] console.log(word); return { word, category }; }Aquí está el registro del navegador.
Al mirar el registro encontramos nuestro estado vacío
Las actualizaciones de estados son asincrónicas, por lo que cuando establece un nuevo valor de estado y console.log() justo después, mostrará el valor anterior, porque el estado aún no se ha actualizado.
Es por eso que el valor de su lista de lettersList muestra el valor anterior del estado en la consola (matriz vacía).
Cuando usa setLettersList(...) , en realidad no está cambiando la variable lettersList en sí. Observe cómo cuando lo declara, const [lettersList, setLettersList] = useState([]); letterList es en realidad constante, por lo que esa variable ni siquiera se puede cambiar. En cambio, le dice a React que vuelva a ejecutar el componente de la función, esta vez dando a lettersList el nuevo valor. Por lo tanto, para el valor actualizado, solo vendrá una vez const [lettersList, setLettersList] = useState([]); se vuelve a ejecutar de la función completa que se vuelve a ejecutar.
Si desea monitorear los cambios en la lista de letras, puede hacer lo siguiente:
useEffect(() => { console.log(lettersList); }, [lettersList]);Esto imprimirá la lista de letras cada vez que se actualice.