Estoy tratando de acceder a la información de esta API. Puedo acceder al primer nivel, sin embargo, cuando intento acceder a cualquier propiedad más allá del primer nivel, aparece un error que indica TypeError: Cannot read properties of undefined (reading 'usd') .
Estoy usando un componente funcional y el gancho useEffect() para llamar a mi API en React.
Ejemplo de API JSON:
{ "name" : "Bitcoin", "market_cap" : { "usd" : 100 } } Por lo que entiendo, esto se debe a que la API no se ha obtenido por completo, por lo que el primer nivel vuelve como indefinido. Puedo acceder al primer nivel ( coin.name ), pero cuando lo intento ( coin.market_cap.usd ) me sale el error.
¿Alguna sugerencia?
const Coin = () => { const params = useParams() const [coin, setCoin] = useState({}) const url = `https://api.coingecko.com/api/v3/coins/${params.coinId}` useEffect(() => { axios.get(url).then((res) => { setCoin(res.data) }).catch((err) => { console.log(err) }) }, []) return ( <div> <h1>{coin.name}</h1> <p>{coin.market_cap.usd}</p> ------>> Error here </div> </div> ) } export default CoinEstá utilizando las propiedades de la moneda antes de que tengan datos de su API, ya que el valor inicial es un objeto vacío {}
debe validar si los datos existen o generará el error:
useEffect(() => { const getData = async() ={ await axios.get(url).then((res) => { setCoin(res.data) }).catch((err) => { console.log(err) }) } getData()}, [])
...devolver (
<div> <h1>**{coin.name ? coin.name : ''}**</h1> <p>**{coin.market_cap ? coin.market_cap.usd : ''}**</p> ------>> Error here </div> </div> )El valor predeterminado de su coin es un objeto vacío y, dado que la obtención de datos es una acción async cuando el componente intenta renderizar por primera vez, no conoce el valor de market_cap , por lo que debe agregar una verificación para ese accesorio al renderizar.
Esto resolvería tu problema:
return ( <div> {coin.name ? <h1>coin.name</h1> : null} { coin.market_data?.market_cap ? <p>{coin.market_data.market_cap.usd}</p> : null } </div> )