El estado de la matriz no cambia cuando se llama al método de cambio de estado:
const [arrayOfDocuments, setArrayOfDocuments] = useState([]); lo intenté: setArrayOfDocuments(...[]); or setArrayOfDocuments([]);
donde uso mi método:
const pushToArrayOfDocuments = (obj) => { const arr = arrayOfDocuments; if (obj.filename && obj.file && obj.expiredate && obj.doctype) { const index = arr.map((e) => e.filename).indexOf(obj.filename); if (index !== -1) { arr[index] = obj; } else { arr.push(obj); } setArrayOfDocuments(arr); } }; ¿Quizás el problema es empujar? y debería hacer setArrayOfDocuments(...arr); or setArrayOfDocuments(prev => [...prev,...arr]) pero si lo hace, supongo que irá en una representación infinita mientras paso pushToArrayOfDocuments a los subcomponentes. Como esto :
OperatorDocument key={`Durc${count}`} title="Durc" description="Descrizione Durc" setDocument={pushToArrayOfDocuments} document={getObjectByName('Durc')} filedocname="Durc" /> editar: haciendo esto: setArrayOfDocuments([...arr]); Obtengo Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. Cualquier ayuda es apreciada.
Debe clonar su matriz antes de agregarla al estado.
const arr = arrayOfDocuments.slice();Fragmento completo:
const pushToArrayOfDocuments = (obj) => { if (obj.filename && obj.file && obj.expiredate && obj.doctype) { const arr = arrayOfDocuments.slice(); const index = arr.findIndex(({ filename }) => filename === obj.filename); if (index > -1) { arr[index] = obj; } else { arr.push(obj); } setArrayOfDocuments(arr); } };En primer lugar, nunca debe mutar el estado de useState directamente, utilícelos como entidades inmutables. Si quieres usarlo como valor inicial, clonalo antes:
const arr = [...arrayOfDocuments] // or const arr = arrayOfDocuments.slice()En segundo lugar, está pasando la misma matriz de estado al setter, entonces el estado no se actualizará. La clonación del estado resolverá este segundo punto.
Finalmente, la mejor manera de construir un nuevo estado a partir del valor anterior es usando una función:
setState(oldValue => (/* construct new state based on old value */))esto evitará usar un valor que no esté actualizado. Al final tendrás:
const pushToArrayOfDocuments = (obj) => { if (obj.filename && obj.file && obj.expiredate && obj.doctype) { setArrayOfDocuments(oldArr => { const arr = oldArr.slice(); const index = arr.map((e) => e.filename).indexOf(obj.filename); if (index !== -1) { arr[index] = obj; } else { arr.push(obj); } return arr; } ) } };Agrego un problema similar, y lo resolví por
en vez de
const arr = matrizDeDocumentos
intente difundir la matriz inicial
const arr = [...matrizDeDocumentos]