Tengo un comportamiento extraño al expandir los datos de la solicitud GET en la consola. ¡Alguien sabe por qué tengo este pequeño azul ! diciendo The value was evaluated upon first expanding. it may have changed since then .

Eventualmente, me gustaría pasar este valor al componente Gallery donde, con suerte, solo se activa una vez Y es fácilmente accesible.

console.log(resp); muestra {data: Array(3), status: 200, statusText: 'OK', headers: {…}, config: {…}, …} con los datos correctos. Cuando se expande, ¡veo el pequeño azul !

console.log(uploadsData); (variable gancho) muestra {resp: {…}} pero está vacío por dentro. Cuando se expande, ¡veo el pequeño azul !

¿Alguien puede decirme cómo rectificar esto?

 import { useEffect, useState } from 'react'; import { BrowserRouter as Router, Switch, Route, useHistory} from 'react-router-dom'; import ReactDOM from 'react-dom'; import '../../sass/HomePage/homePage.scss'; import LoginRegister from "./LoginRegister/LoginRegister"; import Gallery from "./Gallery/Gallery"; const App = () => { const [uploadsData, setUploadsData] = useState({ resp: {} }); let { push } = useHistory(); let authToken = localStorage.getItem('token'); useEffect(() => { const getUploads = () => { const headers = { "Accept": 'application/json', "Authorization": `Bearer ${authToken}` } axios.get('http://localhost:8005/api/get-uploads', {headers}) .then(resp => { console.log(resp); setUploadsData({resp}); console.log(uploadsData) }).catch(error => { console.log(error); }); }; if (authToken !== null) { getUploads(); push('/gallery'); } else { console.log("User's NOT authenticated, returning to login view"); push('/'); } }, [push, authToken]); return ( <> <Switch> <Route exact path="/" component={LoginRegister} /> <Route exact path="/gallery" component={Gallery} /> </Switch> </> ); } export default App; if (document.getElementById('example')) { ReactDOM.render(<Router><App/></Router>, document.getElementById('example')); }