0
223
VistasActualice una matriz bidimensional usando useState
Quiero actualizar mi matriz 2d con useState . Parece que:
[[null, null, null, null, null], [null, null, null, null, null], [null, null, null, null, null], [null, null, null, null, null], ...n]Puedes imaginar la matriz como filas y columnas . Cada columna tiene el mismo valor ( null ).
Lo que quiero es asignar el valor que quiero al primer elemento de esa matriz 2d cada vez que se llama a una función.
- (Primera invocación): [[myValue, null, null, null], ...n]
- (Segunda invocación): [[miValor, miValor, nulo, nulo], ...n]
- (Tercera invocación): [[miValor, miValor, miValor, nulo], ...n]
- (Cuarta invocación) [[miValor, miValor, miValor, miValor], [miValor,null,null,null] ...n]
Intenté varias formas de hacer esto, pero desafortunadamente sin éxito. Compartiré el código a continuación. ¿Cuál es la forma más corta de hacer esto?
El código que probé:
const [data, setData] = useState( Array.from({ length: 6 }, (v) => Array.from({ length: 5 }, (v) => null)) ); const addFunc = (e) => { let value = e.target.value; // first way setData( data.map(([...row]) => { row.map((col) => { if (col === null) { return [...row, [...col, value]]; } }); }) ); // second way setData((val) => { for (var i = 0; i < data.length; i++) { for (var z = 0; z < data[i].length; z++) { if (data[i][z] == null) { return [...val, (val[i][z] = value)]; } } } }); };1 Respuestas
Responde la pregunta0
Dado que parece que desea "iterar" de manera efectiva a través de los data de matriz 2-d, sugiero mantener un "recuento" o algún valor de "índice" actual que se incremente con cada actualización. Cree una función de utilidad que convierta este "recuento" en un índice calculado de "fila" y "columna" que desee actualizar.
Ejemplo:
const [count, setCount] = useState(0); const [data, setData] = useState(Array(6).fill(Array(5).fill(null))); const countToRowCol = (count) => { return { row: Math.floor(count / 5), // 5 is the inner array length col: count % 5 }; }; const addFunc = () => { setData((data) => data.map((row, i) => i === countToRowCol(count).row ? row.map((el, j) => (j === countToRowCol(count).col ? myValue : el)) : row ) ); setCount((c) => c + 1); }; addFunc simplemente mapea las matrices del estado anterior en nuevas referencias de matriz para el índice de fila/columna coincidente; de lo contrario, solo copia superficialmente el estado anterior.
