Mi problema: mi estado a veces se muestra, si actualizo el navegador, actualizo el código, aparece el siguiente error TypeError: Cannot read properties of undefined (reading 'country') No estoy seguro de por qué ocurre este comportamiento. En un caso se muestra y en otro no. Cualquier explicación y solución sería apreciada.
Mi respuesta devuelve un código de estado 200 y todos los datos apropiados que console.log son legítimos, por lo que estoy confundido por qué ocurre este problema.
Aplicación.js
import api from './api/fetchCovidData' import { useState, useEffect } from 'react' const App = () => { const [covid, setCovidData] = useState({}) useEffect(() => { const fetchCovidData = async () => { try{ const response = await api.get('/cases?country=France'); console.log(response.data) setCovidData(response.data); } catch (err) { if (err.response){ // Not in the 200 response range console.log(err.response.data); console.log(err.response.status); console.log(err.response.headers); } else { console.log(`Error: ${err.message}`); } } } fetchCovidData(); }, []); return ( <div> <h1>{covid.All.country}</h1> <h1>{covid.All.population}</h1> </div> ); } export default App;buscarCovidData.js
import axios from "axios"; export default axios.create({ baseURL: 'https://covid-api.mmediagroup.fr/v1' });Respuesta de ejemplo
{ "All": { "confirmed": 2604595, "recovered": 195365, "deaths": 62548, "country": "France", "population": 64979548, "sq_km_area": 551500, "life_expectancy": "78.8", "elevation_in_meters": 375, "continent": "Europe", "abbreviation": "FR", "location": "Western Europe", "iso": 250, "capital_city": "Paris", "lat": "46.2276", "long": "2.2137", "updated": "2020/12/26 12:21:56+00" } }El problema aquí es que su estado inicial es un objeto vacío:
const [covid, setCovidData] = useState({});Pero está intentando hacer referencia a un nivel demasiado profundo en el renderizado inicial antes de que su estado esté realmente poblado:
<div> <h1>{covid.All.country}</h1> <h1>{covid.All.population}</h1> </div> Aquí covid es el objeto vacío ( {} ), y acceder a covid.All está bien ya que devuelve undefined , pero cuando intenta acceder a covid.All.country , ahora está intentando acceder a una propiedad de un indefinido objeto y se arroja el error ( es decir, TypeError: Cannot read properties of undefined (reading 'country') ).
Proporcione un estado inicial válido
const [covid, setCovidData] = useState({ All: {} });Use el operador de encadenamiento opcional para manejar cheques nulos
<div> <h1>{covid.All?.country}</h1> <h1>{covid.All?.population}</h1> </div>Usar cláusulas de protección/verificaciones nulas convencionales
<div> <h1>{covid.All && covid.All.country}</h1> <h1>{covid.All && covid.All.population}</h1> </div>Usar representación condicional
<div> {covid.All && ( <h1>{covid.All.country}</h1> <h1>{covid.All.population}</h1> )} </div>El problema es que tu estado inicial está vacío. Por lo tanto, debe verificar que el estado esté vacío/indefinido/nulo o no antes de usarlo.
return ( covid && covid.All && (<div> <h1>{covid.All.country}</h1> <h1>{covid.All.population}</h1> </div>) )o
<div> <h1>{covid?.All?.country}</h1> <h1>{covid?.All?.population}</h1> </div>Intente agregar un signo de interrogación para validar si existe {covid?.All?.country} otra opción es hacer un condicional
return ( covid && (<div> <h1>{covid?.All?.country}</h1> <h1>{covid?.All?.population}</h1> </div>) ) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import api from './api/fetchCovidData' import { useState, useEffect } from 'react' const App = () => { const [covid, setCovidData] = useState({}) useEffect(() => { const fetchCovidData = async () => { try{ const response = await api.get('/cases?country=France'); console.log(response.data) setCovidData(response.data); } catch (err) { if (err.response){ // Not in the 200 response range console.log(err.response.data); console.log(err.response.status); console.log(err.response.headers); } else { console.log(`Error: ${err.message}`); } } } fetchCovidData(); }, []); return ( <div> <h1>{covid?.All?.country}</h1> <h1>{covid?.All?.population}</h1> </div> ); } export default App; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>