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

【问题标题】：Render React component asynchronously (wait for data to be returned)异步渲染 React 组件（等待数据返回）
【发布时间】：2021-02-21 01:10:28
【问题描述】：

我有以下 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 但功能组件的东西？

【问题讨论】：

这能回答你的问题吗？ How to async await in react render function?

标签： javascript reactjs

【解决方案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>;
}

【讨论】：