ReactJS中展示Coingecko API数据遇问题：无法渲染coin.image.thumb

你遇到的报错核心原因是：组件初始化阶段coin是一个空对象，此时coin.image为undefined，尝试访问undefined.thumb就会触发"Cannot read properties of undefined"错误。而coin.name能正常显示是因为空对象下访问name只会得到undefined，React会默认渲染空内容，不会抛出错误，但嵌套属性的访问逻辑会直接断裂。

以下三种方案都能解决这个问题，按需选择即可：

1. 使用可选链操作符（最简洁） #

在访问嵌套属性时添加?.，当属性不存在时会返回undefined，不会触发报错：

<img src={coin.image?.thumb} alt={coin.name || 'Coin Thumbnail'} />

2. 利用loading状态做条件渲染 #

既然你已经定义了loading状态，可以在数据加载完成前不渲染图片，或者显示加载占位符：

{loading ? (
  <img src={coin.image.thumb} alt={coin.name} />
) : (
  <div className="w-16 h-16 bg-gray-200 rounded-full"></div> // 占位加载框
)}

3. 初始化时设置默认结构 #

在useState中给coin设置包含image的初始结构，避免嵌套属性不存在：

const [coin, setCoin] = useState({ image: { thumb: '' } })

import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { Navbar } from '../components/index'
import axios from 'axios'

const Coin = () => {
    const params = useParams()
    const [coin, setCoin] = useState({})
    const [loading, setLoading] = useState(false)

    const url = `https://api.coingecko.com/api/v3/coins/${params.coinId}`

    useEffect(() => {
        axios.get(url).then((res) => {
            setCoin(res.data)
            setLoading(true)
        }).catch((error) => {
            console.log(error)
        })
    }, [url]) // 加入url到依赖数组，确保params变化时重新请求数据

    useEffect(() => {
        window.scrollTo(0, 0)
    }, [])

    return (
        <div className='text-gray-700'>
            <Navbar />
            <div className='mx-auto max-w-7xl p-8'>
                <div>
                    <img src={coin.image?.thumb} alt={coin.name || 'Coin Image'} />
                </div>
            </div>
        </div>
    )
}

export default Coin

内容的提问来源于stack exchange，提问作者Jakub Polański