Tengo una función que usa un gancho React para configurar una matriz inicial de usuarios. Posteriormente, la matriz se representa en la pantalla en forma de lista. Cada vez que se hace clic en un botón, se agrega un nuevo elemento al final de la matriz. La actualización se representa en la pantalla correctamente.
También tengo otro componente que recibe esta matriz y, por ahora, debería replicar el mismo comportamiento, pero desafortunadamente la actualización no se procesa. Código para ambos a continuación.
He leído sobre copias superficiales y profundas, pero parece que esa no es la causa porque funciona correctamente en el componente principal. Específicamente inicializo una nueva matriz en el setUsers para crear una nueva referencia. Código para ambos a continuación:
Componente principal
import { Button, List } from "grommet"; import { Add } from "grommet-icons"; import { useState } from "react"; import Pending from "./Pending"; export default () => { const [users, setUsers] = useState([ { key: 1, name: "Alan", amount: 20 }, { key: 2, name: "Bryan", amount: 30 }, { key: 3, name: "Chris", amount: 40 }, { key: 4, name: "Eric", amount: 80 } ]); return ( <> <Button primary label="Add" icon={<Add />} onClick={(e) => { const newUser = { key: Date.now(), name: "Adam", amount: 30 }; setUsers((oldUsers) => [...oldUsers, newUser]); }} /> <List primaryKey="name" secondaryKey="amount" data={users} /> <Pending data={users} /> </> ); };Componente anidado
import { useState } from "react"; import { List } from "grommet"; export default (props) => { const [users] = useState(props.data); return ( <> <List primaryKey="name" secondaryKey="amount" data={users} /> </> ); };Cualquier idea de lo que podría estar causando esto. Soy nuevo en React en general, por lo que agradecería una explicación de por qué sucede esto además de una solución real.
Tomaste los props.data iniciales y los pusiste en el estado. Más tarde, cuando cambiaron los accesorios, no cambió el estado: los usuarios que se representan siguen siendo los del estado, en lugar de los actualizados de los accesorios. Es decir, si al principio tienes
props.data === users === [1, 2, 3, 4]Después de agregar un usuario obtienes
props.data === [1, 2, 3, 4, 5] !== [1, 2, 3, 4] === users En un caso como este, no necesita un estado de uso, solo useState los datos de los props directamente. Ese fue el componente que se actualizará cada vez que cambien sus accesorios.
import { List } from "grommet"; export default (props) => { return ( <> <List primaryKey="name" secondaryKey="amount" data={props.data} /> </> ); };