如何在 ReactJS v16+ 中将获取的对象从 App.js 异步传递给子组件

Question

TL;DR

如何异步地将从 App.js 中获取的对象传递给子组件？

我是否必须等待整个数据被提取然后 return App.js？如果是，怎么做？

我正在尝试使用 react-chartjs-2 创建一个仪表板，它从服务器获取数据作为一个整体对象，但是图表在获取过程之前加载，代码如下：

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;

这里我们将统计数据作为获取的对象，并将一些信息（如 stats.isMobile）提取到一个名为 devices 的新数组中。但这里的问题是，当我将 devices 变量作为道具传递给 <Devices /> 组件时，它只是 return 一个空数组（第一个声明的数组。）

如果你能告诉我有任何其他方法，我将不胜感激。

Answer 1

我认为你错过了很多关于 React 基础知识的知识，你应该去阅读有大量示例和模式的文档。您要做的是确保您的组件可以处理“加载”状态。异步请求不是即时的并且需要时间，当您等待请求完成时，您的组件会是什么样子？

我正在使用状态变量来跟踪请求的完成情况。我建议您查看 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;

如何在 ReactJS v16+ 中将获取的对象从 App.js 异步传递给子组件

How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+

javascript

reactjs

chart.js

react-chartjs-2

TL;DR