import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; const CountryDetail = () => { const {countryname}=useParams(); const[countrydet,setCountry]=useState([]); useEffect(()=>{ const url=`https://restcountries.com/v3.1/name/${countryname}`; fetch(url) .then(res=>res.json()) .then(data=>setCountry(data)) },[]) return ( <div style={{textAlign: 'center'}}> <h3>This is country details : {countryname}</h3> <h4>{countrydet.name.common}</h4> <h4>{countrydet.continents}</h4> </div> ); };exportar por defecto CountryDetail;
pero hay un elemento en el objeto {"name":{"common":"Bangladesh","official":"República Popular de Bangladesh","nativeName":{"ben":{"official":"বাংলাদেশ গণপ্রজাতন্ত্রী" ,"común":"বাংলাদেশ"}}}
Cuando el componente se representa por primera vez, la llamada a la API asincrónica y la configuración del estado aún no se han realizado, por lo que countrydet no está definido.
<h3>This is country details : {countryname}</h3> <h4>{countrydet?.name?.common}</h4> <h4>{countrydet?.continents}</h4>Esto debería funcionar, y aquí está la referencia de MDN para el encadenamiento opcional .
o alternativamente, podría envolver todo el bloque en un condicional, algo como esto:
<h3>This is country details : {countryname}</h3> { countrydet?.name?.common && countrydet?.continent ? <> <h4>{countrydet?.name?.common}</h4> <h4>{countrydet?.continents}</h4> </> : <></> }countrydet ..then(([data]) => setCountry(data));countryname de nombre de país está configurado antes de ejecutar la solicitud de recuperación.countrydet está definido antes de intentar acceder a sus propiedades. const CountryDetail = () => { const { countryname } = useParams(); const [countrydet, setCountry] = useState(undefined); useEffect(() => { if (countryname) { const url = `https://restcountries.com/v3.1/name/${countryname}`; fetch(url) .then((res) => res.json()) .then(([data]) => setCountry(data)); } }, [countryname]); return ( <div style={{ textAlign: "center" }}> <h3>This is country details : {countryname}</h3> {countrydet && ( <> <h4>{countrydet.name.common}</h4> <h4>{countrydet.continents}</h4> </> )} </div> ); };