Quiero empujar una matriz 2d al final de un estado. Pero de alguna manera, cuando registro el estado cada vez que cambia con un efecto de uso, reemplazo cada matriz existente con la nueva.
La variable "posición" es mi matriz 2d, también un estado. ¿Podría esto causar algún problema de referencia? No tengo ni idea y estoy empezando a perder la cabeza con esto...
const [positionList, setPositionList] = useState([]); useEffect(() => { const updatePosition = [...positionList, position] setPositionList(updatePosition); }, [playerTurn])resultado esperado (o lo que quiero)
positionList = [position1, position2, position3, //and so on]pero lo que obtengo es esto (digamos que trato de empujar la matriz tres veces)
positionList = [position3, position3, position3]EDITAR: Entonces, después de algunas buenas ideas de la comunidad, descubrí que tenía que copiar mi matriz que quiero empujar (la "posición") antes de empujarla al estado. Entonces mi código de trabajo ahora se ve así:
const [positionList, setPositionList] = useState([]) useEffect(() => { let positionCopy = []; for (let i = 0; i < position.length; i++) { positionCopy[i] = position[i].slice(); } setPositionList([...positionList, positionCopy]); }No agregó positionList como una dependencia de su devolución de llamada useEffect , por lo que la lista de positionList capturada por la devolución de llamada no refleja necesariamente el valor más reciente.
useEffect(() => { // return early if the update already happened to prevent recursion const updatePosition = [...positionList, position] setPositionList(updatePosition); }, [playerTurn, positionList]) TBH, usar useEffect para actualizar un enlace de estado es difícil de mantener y propenso a un comportamiento recursivo accidental.
Puede obtener un mejor kilometraje utilizando un reductor de estado con el gancho useReducer . Para cualquier cosa más allá de la gestión de estado trivial, vale la pena familiarizarse con el gancho useReducer .
probar:
const [positionList, setPositionList] = useState([]); useEffect(() => { setPositionList(state=> [...state, position]); }, [playerTurn])