如何告诉 useEffect 等待数据 API？

Question

我想从 API 获取数据并映射响应以显示它。

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([])

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

   return (
      <nav>
          {allCoins.map(el => {
              <img src={el.iconUrl} alt="" />
              <h2>{el.name}</h2>
              <span>{el.symbol}</span>
          })}
      </nav>
   )
}

但是什么都没有显示。我知道这是一个异步问题，我必须等待状态中的数据才能映射它，但我不知道该怎么做，我也没有在谷歌上找到解决方案。

Answer 1

好吧，我终于解决了我的问题，这不是异步的，而是语法错误。 我使用 {} 而不是 () 作为地图箭头函数。

allCoins.map(el => { ...})❌

allCoins.map(el => ( ...))✅

Answer 2

您需要调用 api asynchronously，您在这里没有这样做。如果其他一切都正确，这两个代码块应该可以工作。

useEffect(() => {
    const getData = async () => {
        const data = await axios.request(options)
        setAllCoins(res?.data?.data?.coins)
    }
    getData()
}, [])

我们直接在useEffect中实现异步，我们只能通过创建一个异步方法并在useEffect hook内部调用来实现。

而且你还需要修改地图中的代码：

{
    allCoins.length > 0 && allCoins.map(el => {
        return <>
            <img src={el.iconUrl} alt="" />
            <h2>{el.name}</h2>
            <span>{el.symbol}</span>
        </>
    })
}

JSX 表达式必须有一个父元素

所以你需要用一个元素或React.Fragment来包装你的元素。