Estoy tratando de pasar una matriz de usuarios como accesorios a un componente, cuando cambio algo y hago clic en guardar, la matriz se muestra en el componente, pero cuando presiono Actualizar, la matriz desaparece, aquí está mi código:
Primero, en mi App.js , estoy leyendo una serie de usuarios de la base de datos (funciona perfectamente y muestra la lista de usuarios):
const [users,setUsers] = React.useState([]); React.useEffect( () => { async function fetchData() { await axios.get('/api/users/') .then(response => { setUsers(response.data); }); } fetchData(); } , []); Luego, también en App.js , estoy representando un ListComponent que toma la matriz de usuarios y muestra a los usuarios:
return ( <ListComponent users={users} /> ); } En mi ListComponent después de actualizar una página, console.log muestra una matriz vacía []
const ListComponent = (props) => { React.useEffect(()=>{ console.log(props.users); // [] },[])Cuando actualice la página, ListComponent se volverá a montar, y lo que está registrando es el estado del componente justo después de montarlo, por lo que la matriz de usuario aún no se ha obtenido. Si desea registrarlo cuando se recupera, debe agregar la matriz de usuario en la matriz de dependencia de la función useEffect :
const ListComponent = (props) => { React.useEffect(()=>{ console.log(props.users); // Should be an empty array first, then updated if your fetch function is working properly },[props.users]); // ... }; Si aún no puede ver la matriz de usuario, significa que algo no está sucediendo como se esperaba en su función fetchData , supongo.