Estoy buscando una manera de mostrar el estado actualizado "filledBoxes" cuando console.log requiere código. Pero el estado actualizado aparece un turno más tarde.
No puedo entender cómo usar 'useEffect' en este caso. Da error cuando se usa dentro de la función "showSymbol". Por favor, hágamelo saber cómo resolver esta situación.
function Playfield() { const [ turn, setTurn ] = useState(0); const [ filledBoxes, setFilledBoxes ] = useState({ player1: [], player2: [] }); function showSymbol (event) { // console.log(event); if(event.target.innerHTML === "") { if(turn%2 === 0) { event.target.innerHTML = "X"; setFilledBoxes(prevValue => ({ ...prevValue, player1: [...prevValue.player1, event.target.id] }) ); } else { event.target.innerHTML = "O"; setFilledBoxes(prevValue => ({ ...prevValue, player2: [...prevValue.player2, event.target.id] }) ); } console.log(filledBoxes.player1); console.log(filledBoxes.player2); setTurn(turn + 1); } }useEffect no hace que el estado se actualice inmediatamente.
Es simplemente un enlace incorporado que "escucha" los cambios en sus dependencias,
y realiza una devolución de llamada que le pasa, una vez que cualquiera de esas dependencias tiene cambios.
Se utiliza en casos como estos para realizar una determinada acción una vez que se produce un cambio.
Así que haciendo -
useEffect(() => { console.log(state); }, [state]) Le mostrará el estado una vez que termine de actualizarse.
Para más información