为什么React中使用useEffect请求API数据时页面刷新会出现报错？

• 组件首次渲染时，useEffect 中的异步数据请求还未完成，你为 coinprice 配置的初始值是空数组 []，此时访问 coinprice[0] 会得到 undefined，直接读取 .name 属性会触发 JavaScript 类型错误，页面刷新相当于重新执行组件挂载流程，自然会复现报错。

你可以任选以下一种方案修复：

1. 用可选链运算符兜底取值
   直接把属性读取的写法修改为 coinprice[0]?.name，当 coinprice[0] 为 undefined 时会直接返回空值，不会抛出错误。
2. 加条件渲染逻辑
   在数据加载完成前渲染加载提示，避免直接访问未加载完成的数组元素，参考代码：

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import './Cryptoinfo.css'

function Cryptoinfo() {
  const [coinprice, setCoinprice] = useState([])
  const url = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur`

  useEffect(() => {
    async function fetchData() {
      try {
        const result = await axios.get(url)
        setCoinprice(result.data.slice(0, 10))
        console.log(result)
      } catch (e) {
        console.error(e)
      }
    }
    fetchData()
  }, [url])

  // 数据未加载完成时返回加载状态
  if (coinprice.length === 0) return <div>数据加载中...</div>

  return (
    <>
      <div className='crypto-info-container'>
        <div className='name-pic'>
          <h3 className='crypto-info-img'>O</h3>
          <h3 className='crypto-info-name'>{coinprice[0].name}</h3>
        </div>
        <h3 className='crypto-info-price'>Price</h3>
        <h3 className='crypto-info-mc'>Marketcap</h3>
        <h3 className='crypto-info-vol'>Volume (24hr)</h3>
        <h3 className='crypto-info-sup'>Circulating supply</h3>
      </div>
    </>
  )
}

export default Cryptoinfo

3. 配置合理的初始值
   如果你的业务逻辑确定只需要读取数组第一个元素的属性，可以把 coinprice 的初始值设置为 [{name: ''}]，从根源避免首次渲染时读取空数组元素的问题。

内容的提问来源于stack exchange，提问作者ChristianKnopert