在 fetch 完成之前调用 React 组件

Question

我在 React 中有以下 function 但我遇到的问题是获取没有及时完成以将数据传递给 Chart 组件。 所以图表呈现没有图表。

export const OverviewChart = () => {
  type dateValue = {
    x: number,
    y: number
  }

  var data: Array<dateValue> = Array();

  const fetchFromUrl = async() =>{
    const response = await fetch(`${process.env.PUBLIC_URL}/tempData/monthly.csv`)
    const responseText = await response.text();
    const parsedResponse = readString(responseText);

    parsedResponse.data.forEach(x => {
        data.push( {x: Number(new Date(x[0])), y: Number(x[1]) } )
    })
  }

  fetchFromUrl();
  
  return(
    <Chart data={data} currentValue={1840.87}/>
  );
} 

我在我的图表上有一个重绘 function 所以当我调整大小时，它会正确渲染，但我希望它能够正确渲染而不必先调整它的大小。

Answer 1

我认为您只需要正确使用 state ：

export const OverviewChart = () => {
  type dateValue = {
    x: number,
    y: number
  }

const [data, setData] = React.useState([]);
React.useEffect(() => {
  let results = [];
  const fetchFromUrl = async() =>{
    const response = await fetch(`${process.env.PUBLIC_URL}/tempData/monthly.csv`)
    const responseText = await response.text();
    const parsedResponse = readString(responseText);

    parsedResponse.data.forEach(x => {
        results.push( {x: Number(new Date(x[0])), y: Number(x[1]) } )
    })
    setData(results);
  }

  fetchFromUrl();
}, []);
  return(
    <Chart data={data} currentValue={1840.87}/>
  );
} 

它应该以这种方式自动重新渲染，否则我不会在你有数据之前渲染图表：

  return data.length ? (
    <Chart data={data} currentValue={1840.87}/>
  ) : 'Loading...';

Answer 2

您需要在组件返回时执行加载验证。 这是一个简单的示例：

import React from 'react'

export const ComponentName = () => {

  //React Hooks
  const [isLoading, setIsLoading] = React.useState(true)

  const fetchFromUrl = async() =>{
    const response = await fetch(`your fetch`)
    //other operations

    //when job operations done loading is defined as false
    setIsLoading(false)
    }

  fetchFromUrl();
  
  return(
    !isLoading? // = !(isLoading === true) => false; when isloading false, return false 
      <Component data={"data"} otherProps="props"/>
      : null //OR (not recommended)
    //<LoadingComponent /> // (recomended) OR
    //<SpinningLoadingComponent /> // (recommended)
    // is recommended to see loading when user call this component
  );
} 

Answer 3

1. 您需要将数据放到 state 上。 为此，您需要重写无状态组件以继承 React.Component。 另一种方式是调用forceUpdate，不推荐。
2. 在获取数据之前，您需要渲染一个空组件或加载微调器。 获取成功后，您需要调用 setState ，这将再次调用 render 方法并正确绘制图表。