如何告诉useEffect等待数据接口？

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>
   )
}

但没有显示任何内容。我知道这是一个异步问题，我必须等待状态中的数据，然后才能映射它，但我不知道如何做，我也没有在Google上找到解决方案。

Answer 1

好了，最后我解决了我的问题，它不是异步的，只是语法错误。我为map箭头函数使用了{}而不是()。

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

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

Answer 2

您需要调用asynchronously接口，但您在这里并没有这样做。如果其他一切都是正确的，那么这两个代码块应该可以工作。

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

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

你还需要在map中修改你的代码：

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

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

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