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

大佬教程收集整理的这篇文章主要介绍了异步渲染 React 组件（等待数据返回），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决异步渲染 React 组件（等待数据返回）？

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

解决方法

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>;
}

大佬总结

以上是大佬教程为你收集整理的异步渲染 React 组件（等待数据返回）全部内容，希望文章能够帮你解决异步渲染 React 组件（等待数据返回）所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。