Estoy pasando una matriz de objetos a un elemento secundario como accesorios, y quería que el componente secundario se volviera a representar cuando cambia la matriz, pero no es así:
padre:
export default function App() { const [items, setItems] = useState([]); const buttonCallback = () => { setItems([...items, { text: "new item" }]); }; return ( <div className="App"> <h1>Items list should update when I add item</h1> <button onClick={buttonCallback}>Add Item</button> <Items /> </div> ); }niño:
const Items = ({ itemlist = [] }) => { useEffect(() => { console.log("Items changed!"); // This gets called, so the props is changing }, [itemlist]); return ( <div className="items-column"> {itemlist?.length ? itemlist.map((item, i) => <Item key={i} text={item.text + i} />) : "No items"} <br /> {`Itemlist size: ${itemlist.length}`} </div> ); };Encontré esta pregunta con el mismo problema, pero es para componentes de clase, por lo que la solución no se aplica a mi caso.
<Items propsname={data} />
const buttonCallback = () => { setItems([...items, { text: "new item" }]); };pero deberías ponerlo como:
const buttonCallback = () => { setItems([...items, { text: "new item", id: Date.now() }]); };Porque no se recomienda usar el índice como clave para reaccionar niños. En su lugar, puede utilizar la fecha real con esa función. Esa es la clave para que React sepa que los niños han cambiado.
itemlist.map((item) => <Item key={item.id} text={item.text} />)Intente a continuación: está agregando una matriz como una dependencia, para reconocer el cambio en la variable, debe hacer una copia profunda o cualquier otra cosa que indique que useEffect obj es realmente diferente. `
const Items = ({ itemlist = [] }) => { const [someState,someState]=useState(itemlist); useEffect(() => { someState(itemlist) }, [JSON.stringify(itemlist)]); return ( <div className="items-column"> {someState?.length ? someState.map((item, i) => <Item key={i} text={item.text + i} />) : "No items"} <br /> {`Itemlist size: ${someState.length}`} </div> ); };