reactjs - 使用 UseEffect Hook 获取 API

Question

我正在尝试通过提取的信息更新我的状态，从而从 API 获取加密货币数据。但是当我这样做时，我的 console.log 显示的是一个空对象。也没有数据传递给我的子组件。我在这里做错了什么吗？

import React, {useState, useEffect} from 'react';
import SmallBox from './SmallBox';
import './App.css';

function App() {
  const [smallData, setSmallData] = useState({})

  async function getAPI(){
    await fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false
    `)
    .then(response => response.json())
    .then(data => setSmallData({data})); 
  }

  useEffect( () => {
    getAPI();
    console.log(smallData)
  }, []);


  return (
    <div className="app">
      
      {/* SmallBox - balance */}
      <SmallBox className="balance"/>
      
      {/* SmallBox - bitcoin */}
      <SmallBox className="bitcoin" coin={smallData}/>
      
      {/* SmallBox - ethereum */}
      <SmallBox className="ethereum" coin={smallData}/>
      
      {/* SmallBox - ripple */}
      <SmallBox className="ripple" coin={smallData}/>
      
      {/* SmallBox - tether */}
      <SmallBox className="tether" coin={smallData}/>
     
    </div>
  );
}

export default App;

Answer 1

尝试在记录数据之前await获取数据，而不是在async函数getAPI中等待获取:

  function getAPI(){
    return fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false
    `)
      .then(response => response.json())
      .then(data => setSmallData({data})); 
  }

  useEffect( () => {
    await getAPI();
    console.log(smallData)
  }, []); // <- Add dependencies here

注意:我认为 getAPI 将在组件的每次渲染时被调用，我认为这不是您想要的。我建议向传递给 useEffect 函数的第二个变量(一个空数组)添加一些依赖项，告诉 React 只有当那个/那些变量发生变化时才调用这个效果。例如，您可以添加货币。