Utilizo un módulo de reacción que gestiona el uso de hojas de cálculo: react-spreadsheet https://github.com/iddan/react-spreadsheet/
En mi proyecto, necesito varias hojas de cálculo y, por lo tanto, varias tablas que el usuario puede agregar, modificar y eliminar sobre la marcha.
Al principio, quería usar una gran variable useState donde las matrices de datos se concentrarían en la forma: stateData = [ [...arrays], [...arrays...] ]
Pero el módulo, que usa una función OnChange que toma como valor setData, parece fallar cuando mi variable stateData contiene diferentes matrices.
<Spreadsheet key={index} className='table' columnLabels={stringLabelCol} rowLabels={stringLabelRow} data={stateData[index]} onChange={setData} />Como no puedo administrar todo en un UseState con este módulo, ¿es posible crear una serie de UseState dentro de un bucle?
Me parece que es una mala práctica pero estoy realmente bloqueado Gracias por leer mi texto... :/
Al ver tu código y tu comentario, asumo que:
useState con nombre data con TODOS tus datos en élsheetData y el onChange que lo actualiza El problema en su código es que está configurando onChange={setData} , lo que significa que cualquier cambio anulará TODO el objeto de datos, no solo el índice de destino.
Lo que quiere hacer es que su función onChange sea una función que actualice solo la parte correcta de su estado. Así que lo harías así:
const [data, setData] = useState([]) const updateSheetData = (index, sheetData) => { // We clone the current state const tempData = [...data] // We update the right index tempData[index] = sheetData // This is now the new state setData(tempData) } //... // the onChange function for our component will use our custom function <Spreadsheet key={index} className='table' columnLabels={stringLabelCol} rowLabels={stringLabelRow} data={stateData[index]} onChange={(newData) => updateSheetData(index, newData)} /> Luego, también deberá actualizar correctamente el estado de los data cada vez que agregue una nueva hoja o elimine una hoja, para asegurarse de que el índice esté actualizado. Pero la idea es la misma