Estoy tratando de actualizar un objeto que está almacenado en mis 'elementos' de gancho useState. El bloque de código 1 no funciona, pero el bloque de código 2 sí. Lo único que hice fue poner mis elementos en una nueva variable. ¿Alguien puede explicar por qué el bloque de código 1 no funciona, sin embargo, el bloque de código 2 sí funciona?
No funciona
const Users = () => { const [items, setItems] = useState(''); const folder = { id: itemId, title: text, location: itemLocation, }; // get object index const objIndex = items.findIndex(obj => obj.location === itemLocation); // update object items[objIndex] = folder; // set state with update setItems([...items]); };Abajo funciona
const Users = () => { const [items, setItems] = useState(''); const folder = { id: itemId, title: text, location: itemLocation, }; // put state into variable const myItems = [...items] // get object index const objIndex = items.findIndex(obj => obj.location === itemLocation); // update object myItems[objIndex] = folder; // set state with update setItems(myItems); };items[objIndex] = folder;Nunca debe actualizar el estado directamente de esta manera. React asume que siempre usa las funciones de "establecer" para actualizar su estado, y no sabrá cuándo volver a renderizar sus componentes si modifica el estado directamente.
https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly
// update object items[objIndex] = folder;Creo que este es el problema. De hecho, nunca intenté cambiar el estado en sí (siempre supuse que es de solo lectura).
Probaré esto más tarde para estar seguro. Pero por lo general, no edita el estado directamente (el estado significa la variable de items ). O bien 1) crea un elemento 1 como items1 = { ...items } y luego setItems(items1[objIndex] = folder) items1 sigue su enfoque en el segundo fragmento de código.