从 API 渲染嵌套对象 - 类型错误：无法读取未定义的属性

Question

我正在尝试从此 API 访问信息。我可以访问第一级，但是当我尝试访问超过第一级的任何属性时，我收到一条错误消息，指出 TypeError: Cannot read properties of undefined (reading 'usd')。

我正在使用功能组件和 useEffect() 挂钩在 React 中调用我的 API。

JSON API 示例：

{
  "name" : "Bitcoin",

  "market_cap" : {
    "usd" : 100
  }
}

据我了解，这是因为 API 尚未完全获取，因此第一级返回为未定义。我可以访问第一级 (coin.name)，但是当我尝试 (coin.market_cap.usd) 时出现错误。

有什么建议吗？

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 Coin

Answer 1

coin 的默认值是空对象，因为当组件第一次尝试渲染时获取数据是async 操作，所以它不知道market_cap 值，因此您需要添加对该道具的检查渲染时。

这将解决您的问题：

return (
        <div>
          {coin.name ? <h1>coin.name</h1> : null}
        {
          coin.market_data?.market_cap
          ? <p>{coin.market_data.market_cap.usd}</p>
          :  null
        }
        </div>
    )

Answer 2

您在从您的 api 获得数据之前使用硬币属性，因为初始值是一个空对象{}

您应该验证数据是否存在，否则会引发错误：

useEffect(() => {
    const getData = async() ={   ​
       ​await axios.get(url).then((res) => {
           ​setCoin(res.data)
       ​}).catch((err) => {
           ​console.log(err)
   ​    })
    }
    
    getData()

}, [])

...

返回（

   <div>
        <h1>**{coin.name ? coin.name : ''}**</h1>
        <p>**{coin.market_cap ? coin.market_cap.usd : ''}**</p>   ------>> Error here
        </div>
   </div>  
)