在 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 方法並正確繪制圖表。