异步渲染 React 组件（等待数据返回）

Question

我有以下 ReactJS 组件：

import React, {useState} from 'react';
import Plot from 'react-plotly.js';

import {utility} from "./utility";

function Chart() {
    
    const [use_data, setData] = useState([]);

    const handleClick = () => {
        const newData = {
            x: ['giraffes', 'orangutans', 'monkeys'],
            y: [20, 14, 23],
            type: 'bar'
        }
        setData((use_data) => [...use_data, newData]);
    };

    return (
        <>
        <button onClick={handleClick}>GO</button>
        <Plot
            var data = {use_data}
            var layout={ {width: 1000, height: 400, title: "Top 100 Topics"} }
        />
        </>
    );

}

export default Chart;

它更新硬编码数据以在按钮点击时生成以下图表：

显然，我需要获取自己的数据，而不是像上面那样对其进行硬编码。在我的 utilites.js 中，我生成的数据与上面显示的结构相同（newData），但是返回这些数据大约需要一秒钟。因此，React 不会渲染视觉。

ReactJS 显然正在寻找某种异步状态管理来呈现这种视觉效果（一旦数据返回就呈现）。

const handleClick = () => {
    const newData = utilities.fetch_data()
    setData((use_data) => [...use_data, newData]);
}; 

如何更改我上面的代码以允许异步渲染。这是否需要钩子来实现类似于 componentDidMount 的东西，但用于功能组件？

Answer 1

如果我理解正确，您应该在获取数据时使用 Promise，之后，您需要一个实用程序来格式化响应，如下例所示：

const formatter = (statics) => {
  const tmp = statics.map((static) => {name: static.name, .......});

  return tmp;
};

function App() {
  const [state, setState] = React.useState(null);

  React.useEffect(() => {
    fetch('https://blahblahblah.com')
      .then((res) => res.json())
      .then((response) => {
        return formatter(response.data.statics);
      })
      .then((formatedData) => setState(formatedData));
  }, []);

  return <h1>{state ? JSON.stringify(state) : "wait..."}</h1>;
}