JSON API 返回未定义

Question

When I try to show the height and weight from an API ( http://thedogapi.com/ ), I get an error:

TypeError: Cannot read properties of undefined (reading 'metric')

If I comment the "items.height.metric" everything works great, but I have to show these results also.

From a page before I get the ID, as I click on an item from a list, that brings me to the second page, showing something like "http://localhost:3000/config/?id=2" (So, I clicked on the second item). GitHub: https://github.com/fvrabelo/tiroNewDogApi Any help? love y'all

enter image description here

 import {React} from 'react' import {useEffect, useState} from 'react'; import {Link} from 'react-router-dom' const Page = () =>{ // identifica ID na url const urlParams = new URLSearchParams(window.location.search); const id = urlParams.get('id'); // fetch da raca baseado no ID passado pela url const [items, setItems] = useState([]) useEffect(() => { const getBreeds = async () =>{ const res = await fetch( `https://api.thedogapi.com/v1/breeds/${id}` ); const data = await res.json(); setItems(data) } getBreeds() }, []) //fetch da imagem function getImage(imageId) { fetch(`https://api.thedogapi.com/v1/images/${imageId}`) .then(r =>r.json()) .then(response=> { const data = response document.querySelector(".image").src = data.url; }) } return( <div className="" style={{"display": "flex", "position":"relative", "justify-content": "center", "align-items": "center", 'flex-direction': "column", "maxWidth":"100%", "maxHeight":"100%"}}> <h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Breed name</h6> <h5 className="card-title text-center">{items.name}</h5> <h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Bred for</h6> <h5 className="card-title text-center">{items.bred_for}</h5> <h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Group</h6> <h5 className="card-title text-center">{items.breed_group}</h5> <h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Temperament</h6> <h5 className="card-title text-center">{items.temperament}</h5> <h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Life span</h6> <h5 className="card-title text-center">{items.life_span}</h5> <h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Height</h6> <h5 className="card-title text-center">{items.height.metric}</h5> <h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Weight</h6> <h5 className="card-title text-center">{items.weight.metric}</h5> <img className ="image" src={getImage(items.reference_image_id) } style={{ "maxHeight": "300px", "maxWidth": "300px", "marginBottom":"15px" }}/> <Link to="/" className="btn btn-primary">Home</Link> </div> ); } export default Page;

 <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>

For now I have something like this: enter image description here

Answer 1

This could be because the fields height.metric do not exist for some dogs (and for others they do). So you have to handle that possibility:

{ items.height.metric &&
            <h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Height</h6>
            <h5 className="card-title text-center">{items.height.metric}</h5>
}
{ items.weight.metric &&
            <h6 className="card-subtitle mb-2 text-muted text-center" style={{"marginTop":"5px"}}>Weight</h6>
            <h5 className="card-title text-center">{items.weight.metric}</h5>
}