Estoy tratando de actualizar un solo par de valores clave en una matriz de objetos usando React.
Una matriz de objetos
const array = [ {id:1,name:'Tyler',age:23}, {id:2,name:'Lauren',age:28}, {id:3,name:'Nico',age:14}, ] Dada una identificación y una edad, quiero poder actualizar el único objeto que coincida con la identificación. Por ejemplo, dada una identificación de 2 y una edad de 56, {id:2,name:'Lauren',age:28} debería cambiar a {id:2,name:'Lauren',age:56}
Configuré useState para copiar la matriz de objetos. Sin embargo, tengo dificultades para filtrar la identificación seleccionada, cambiar la edad y devolver la matriz actualizada.
Esto es lo que tengo actualmente:
import { useState } from "react"; const array = [ { id: 1, name: "Tyler", age: 23 }, { id: 2, name: "Lauren", age: 28 }, { id: 3, name: "Nico", age: 14 } ]; export default function App() { const [list, setList] = useState(array); const updateAge = (id = 2, age = 56) => { setList([...list, list.filter((item) => item.id === id)]); }; return ( <> <ul> {list.map((item) => { return ( <li> {item.name} | {item.age} </li> ); })} </ul> <button onClick={updateAge}>Update age</button> </> ); }Aquí está mi enlace de codesandbox
Puede usar la función de map para producir una nueva matriz para establecer el estado.
const updateAge = (id, age) => { console.log(id, age); setList( list.map((item) => { if (item.id === id) { return { ...item, age }; } else { return item; } }) ); }; Si la identificación coincide, fusionará la nueva age ; de lo contrario, devolverá el artículo sin cambios.
Tenga en cuenta que solo producirá nuevos objetos para la edad actualizada, el resto serán las mismas referencias. Es decir, será una nueva matriz , pero la mayoría de los objetos (excepto el modificado) serán los mismos. Si desea nuevos objetos , también puede return { ...item } en la cláusula else .
En este caso particular, React solo se preocupará de que establezca el estado con una nueva matriz .
Aquí está la caja de arena
import { useState } from "react"; const array = [ { id: 1, name: "Tyler", age: 23 }, { id: 2, name: "Lauren", age: 28 }, { id: 3, name: "Nico", age: 14 } ]; export default function App() { const [list, setList] = useState(array); const updateAge = (id, age) => { // Find the item to update and store it in new list let el = list.map((item) => {if(item.id === id){item.age=age}return item}); // Set the previous list to the new list setList(el) console.log(list) }; return ( <> <ul> {list.map((item, index) => { return ( <li key={index}> {item.name} | {item.age} </li> ); })} </ul> <button onClick={()=>updateAge(2, 56)}>Update age</button> </> ); }Fui al enlace de Codesandbox, lo cambié un poco, hace lo que estaba tratando de hacer, ahora usé Map en lugar de filtrar, espero que esto ayude.
Puedes actualizar tu matriz de esta manera
import { useState } from "react"; const array = [ { id: 1, name: "Tyler", age: 23 }, { id: 2, name: "Lauren", age: 28 }, { id: 3, name: "Nico", age: 14 } ]; export default function App() { const [list, setList] = useState(array); const updateAge = (id = 2, age = 56) => { setList(list.map(l=>l.id==id?{...l,age:age}:l)); }; return ( <> <ul> {list.map((item) => { return ( <li> {item.name} | {item.age} </li> ); })} </ul> <button onClick={updateAge}>Update age</button> </> ); }