Seguí la respuesta en este hilo para intentar actualizar mi objeto profundamente anidado en React. Reaccionar: configuración de estado para objetos profundamente anidados con ganchos
Lo que parece funcionar como un encanto allí, de alguna manera se romperá para mí al hacer lo siguiente:
Tengo una tabla poblada con elementos de una matriz definida así:
const [items, setItems] = useState([ { selected: false, title: 'Item 1', status: 'new' }, { selected: false, title: 'Item 2', status: 'used' }, ]); Al seleccionar un elemento de esa lista, se llama a esta función para actualizar la variable selected para el objeto con el índice que i gusta, así:
const select = (e) => { const i = e.target.getAttribute('data-index'); setItems((prevState) => { prevState[i].selected = !prevState[i].selected; return [...prevState]; }); }; Esto funcionará exactamente una vez. Si activé la select por segunda vez o en cualquier momento después de ese return [...prevState] alguna manera sigue devolviendo el estado sin cambios. ( selected permanece true para siempre). No puedo resolver esto.
items se adjuntan a una List de componentes de la siguiente manera:
<List items={items} /> y dentro List (código abreviado):
{items.map((item, i) => { return ( <tr className="list-table-tr"> {hasSelector ? ( <td className="list-table-td-selector"> {item.selected ? ( <div data-index={i} className="global-selector-selected" onClick={select} ></div> ) : ( <div data-index={i} className="global-selector-unselected" onClick={select} ></div> )} </td> ) : null}Está rompiendo una de las reglas principales del estado React: está modificando un objeto de estado directamente, en lugar de hacer una copia.
Para hacer correctamente la actualización, harías esto:
const select = (e) => { const i = e.target.getAttribute('data-index'); setItems((prevState) => { // Copy the array (your code was doing that) const update = [...prevState]; const item = update[i]; // Copy the object (your code wasn't doing that) and update its // `selected` property update[i] = {...item, selected: !item.selected}; return update; }); };Observe cómo se copian tanto la matriz como el objeto, en lugar de solo la matriz.