如何告诉 useEffect 等待数据 API？

Posted 2023-03-17

【中文标题】如何告诉 useEffect 等待数据 API？

【英文标题】：How to tell useEffect to wait for data API?

【发布时间】：2022-01-02 20:46:40

【问题描述】：

我想从 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  />
              <h2>el.name</h2>
              <span>el.symbol</span>
          )
      </nav>
   )

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

【问题讨论】：

您所展示的内容似乎是合理的。您是否在控制台中收到任何错误？ API 的实际响应是什么？

我在控制台中没有收到错误，我得到了数据，但只有在执行返回之后才显示任何内容。

然后当你 setAllCoins 组件应该用新数据重新渲染。

【参考方案1】：

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

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

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

【参考方案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  />
            <h2>el.name</h2>
            <span>el.symbol</span>
        </>
    )

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

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

【讨论】：

定义async 函数是没有意义的，因为你没有在其中await 任何东西。您只需将相同的 Promise 链（确实异步调用 API）包装在一个冗余函数中。

对不起，我忘了更正他的陈述。

他们已经在异步调用它，是使用 async/await 还是 .then 完全是一个选择问题。答案的前半部分根本无助于解决问题。