如何在 ReactJS v16+ 中將獲取的 object 從 App.js 異步傳遞給子組件

Question

TL;博士

如何將獲取的 object 從 App.js 異步傳遞給子組件？

我是否必須等待獲取整個數據然后返回 App.js？ 如果是這樣，如何？

---

我正在嘗試使用 react-chartjs-2 創建一個儀表板，它從服務器整體 object 獲取數據，但是圖表在獲取過程之前加載，這里是代碼：

import './App.css';
import AvgVisitDuration from './component/AvgVisitDuration';
import Devices from './component/Devices';
import About from './component/About';

let stats;
let devices = [];

async function getStats() {
  const response = await fetch('http://192.168.1.4:8080/api');
  const data = response.json();
  stats = data;
  getDevices();
}

function getDevices() {
    // Set 'devices' as a new array based on 'stats'
}

function App() {
  getStats();
  return (
    <div className='container'>
      <About />
      <AvgVisitDuration />
      <Devices Data={devices} /> // This is the chart component
    </div>
  );
}

export default App;

在這里，我們將統計數據作為獲取的 object 並將一些信息（如 stats.isMobile）提取到一個名為 devices 的新數組中。 但這里的問題是，當我將 devices 變量作為道具傳遞給<Devices />組件時，它只返回一個空數組（第一次聲明的數組。）

如果您能告訴我還有其他方法，我將不勝感激。

Answer 1

我認為你錯過了很多關於 React 基礎的知識，你應該 go 閱讀包含大量示例和模式的文檔。 您要做的是確保您的組件可以處理“加載”state。 異步請求不是立即的並且需要時間，當您等待請求完成時，您的組件會是什么樣子？

我正在使用 state 變量來跟蹤請求的完成情況。 我建議您查看 useEffect 的工作原理，以更好地理解此代碼段。

import AvgVisitDuration from './component/AvgVisitDuration';
import Devices from './component/Devices';
import About from './component/About';
import { useEffect, useState } from 'react';


function App() {
  const [devices, setDevices] = useState([])
  const [loadingDevices, setLoadingDevices] = useState(false)

  useEffect(() => {
    async function getStats() {
      setLoadingDevices(true)
      try {
        const response = await fetch('http://192.168.1.4:8080/api');
        const data = response.json();
        const transformData = ... // do whatever you need to do to extract the data you need from the async call
        setDevices(transformData)
        setLoadingDevices(false)
      } catch(e) {
        setLoadingDevices(false)
      }
    }

    getStats();
  }, [setStats, setLoadingDevices])

  return (
    <div className='container'>
      <About />
      <AvgVisitDuration />
      {loadingDevices ? <div>loading ...</div> : <Devices Data={devices} />}
    </div>
  );
}

export default App;