如何让useEffect等待API数据加载完成后再执行渲染操作？

你遇到的无内容渲染问题和异步加载无关，是两处JSX语法错误导致的：

• map 回调函数使用花括号包裹逻辑时没有添加return语句返回JSX元素，相当于没有输出任何内容
• 遍历生成的多个同级JSX元素必须绑定唯一key属性，且需要用单个根节点包裹

修正后代码 #

import React from 'react'
import { useState, useEffect } from 'react'
import axios from 'axios'

export default function Nav() {

   const options = {
      method: 'GET',
      url: 'url',
      headers: {
         'x-rapidapi-host': 'host',
         'x-rapidapi-key': 'key'
      }
   }

   const [allCoins, setAllCoins] = useState([])
   // 可选：添加加载、错误状态优化体验
   const [loading, setLoading] = useState(true)
   const [requestError, setRequestError] = useState('')

   useEffect(() => {
      axios.request(options)
      .then(res => {
        setAllCoins(res.data.data.coins)
      })
      .catch(err => {
        console.error(err)
        setRequestError(err.message)
      })
      .finally(() => {
        setLoading(false)
      })
   }, [])

   if (loading) return <div>数据加载中</div>
   if (requestError) return <div>数据加载失败：{requestError}</div>

   return (
      <nav>
          {/* map回调改用圆括号实现隐式返回，不需要额外写return */}
          {allCoins.map(el => (
              <div key={el.id}>
                <img src={el.iconUrl} alt={el.name} />
                <h2>{el.name}</h2>
                <span>{el.symbol}</span>
              </div>
          ))}
      </nav>
   )
}

如果接口返回的coin数据没有唯一id字段，可以临时用数组下标作为key值key={index}，不推荐但可正常运行。

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