如何在 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;