Estoy intentando actualizar la variable UserData creada con useState para que cada vez que alguien haga clic en Agregar usuario, se agregue un objeto de datos al comienzo de UserData, pero el problema es que solo funciona con operadores de propagación y no con push, pop, o unshift operaciones, como se ve en el código a continuación.
El siguiente código funciona muy bien y se actualiza y vuelve a mostrar cada vez que cambia usersData :
const [usersData, setUsersData] = useState([]); const receiveUserData = (data) => { const dataUpdated = [data, ...usersData]; setUsersData(dataUpdated); }; Sin embargo, dataUpdated tiene los mismos datos que el código anterior, el siguiente código no vuelve a mostrar la página:
const [usersData, setUsersData] = useState([]); const receiveUserData = (data) => { let dataUpdated = usersData; dataUpdated.unshift(data); setUsersData(dataUpdated); };El segundo intento, que es:
const [usersData, setUsersData] = useState([]); const receiveUserData = (data) => { let dataUpdated = usersData; dataUpdated.unshift(data); setUsersData(dataUpdated); }; no se vuelve a renderizar porque para React nada ha cambiado, ya que está dando la misma reference a setUsersData . De hecho unshift actualiza el contenido sin afectar la referencia, por dataUpdated === usersData .
Cada vez que necesite actualizar un Object o una Array para volver a renderizar, debe crear una nueva reference . Y el operador de propagación hace eso, y es por eso que su primer intento está funcionando, que es:
const [usersData, setUsersData] = useState([]); const receiveUserData = (data) => { const dataUpdated = [data, ...usersData]; setUsersData(dataUpdated); };