等待所有api请求成功react - fetch

Question

我是 React 新手，对 javascript 有基本的熟悉。我对这个问题的目标是确保在将所有数据传递到下一个组件之前加载所有数据。

这是 ExpensesAnalysis 代码（父组件）

const ExpenseAnalysis = () => {

    const selectButtonDefaultValue = '2019';
    const yearlyExpensesTracker = new Array(12); 

    const [yearlyExpenses, setYearlyExpenses] = useState([[]]);
    const [isLoaded, setIsLoaded] = useState(false);
    const [selectValue, setSelectValue] = useState(selectButtonDefaultValue);

    useEffect(() => {
        getAllExpensesForSpecifiedYear(selectValue);
    }, []);

    function fetchNewData(month, date){
        const EXPENSES_URL = 'http://localhost:8080/expenseOps/expenses?date=' + date;

        fetch(EXPENSES_URL)
            .then(res => res.json())
            .then(data => {

                // Set the flag to 'true' when we populate that 'expenses' object. 
                setIsLoaded(true);

                yearlyExpensesTracker[month] = data; 
                setYearlyExpenses(yearlyExpensesTracker);

            });
    }

    function getDate(){
        return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 
    }

    function getAllExpensesForSpecifiedYear(year){
        let dateArr = getDate(); 

        for(let i = 0; i < dateArr.length; i++){
            let date = dateArr[i] + "/" + year; 

            fetchNewData(dateArr[i], date); 
        }
    }

    function handleChange(event) {
        let value = event.target.value;
        setSelectValue(value);
        getAllExpensesForSpecifiedYear(value); 
    }

  
    if(isLoaded){
        // Pass the data object to render the table. 
        return (
            <div>
                <div>
                    Year: 
                </div>
                <select name="month" onChange={handleChange}>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                </select>

                <ChartComponent data={yearlyExpenses}></ChartComponent>
            </div>
        )
    }
    else{
        return (
            <></>
        )
    }
    
}

这是 ChartComponent 代码（子组件）

const ChartComponent = ({ data: yearlyExpenses }) => {

  const data = {
    labels: getMonthLabelsForGraph(),
    datasets: [{
        label: 'Month Total',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: calculateTotalForMonth(yearlyExpenses)
    }]
  };


  return (
    <Line data={data} />
  )
}

export default ChartComponent;

问题是，当我尝试将数据发送到子组件时，并非所有数据都可用，这是由于 javascript 的异步特性和没有等待所有 api 调用完成的逻辑。

您能否建议一个逻辑来处理这个问题，以便我不会将不完整的数据传递到子组件上。

Answer 1

我已经调整了您的代码，您可以尝试类似的操作，

import { useEffect, useState } from "react";

const ExpenseAnalysis = () => {
  const selectButtonDefaultValue = "2019";
  const yearlyExpensesTracker = [];

  const [yearlyExpenses, setYearlyExpenses] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [selectValue, setSelectValue] = useState(selectButtonDefaultValue);

  useEffect(() => {
    getAllExpensesForSpecifiedYear(selectValue);
  }, []);

  function getDate() {
    return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  }

  function getAllExpensesForSpecifiedYear(year) {
    let dateArr = getDate();

    dateArr.forEach(async (e) => {
      let date = e + "/" + year;
      try {
        const EXPENSES_URL =
          "http://localhost:8080/expenseOps/expenses?date=" + date;

        const res = await fetch(EXPENSES_URL);
        const data = await res.json();

        yearlyExpensesTracker[e - 1] = data;

        if (yearlyExpensesTracker.length === 12) {
          setYearlyExpenses(yearlyExpensesTracker);
          setIsLoaded(true);
        }
      } catch (e) {
        console.log(e);
      }
    });
  }

  function handleChange(event) {
    let value = event.target.value;
    setSelectValue(value);
    getAllExpensesForSpecifiedYear(value);
  }

  //   // Pass the data object to render the table.
  return (
    <div>
      {isLoaded ? (
        <>
          <div>Year:</div>
          <select name="month" onChange={handleChange}>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
          </select>{" "}
           <ChartComponent data={yearlyExpenses}></ChartComponent>
        </>
      ) : (
        <> </>
      )}

      {console.log("arr", yearlyExpenses)}
    </div>
  );
};

export default ExpenseAnalysis;

我希望这能解决您的问题。

Answer 2

我认为你可以设定一个条件来渲染子组件。

const [yearlyExpenses, setYearlyExpenses] = useState([]);
// Replace the useState yearlyExpenses with this

{yearlyExpenses.length > 0 && <ChartComponent data={yearlyExpenses}></ChartComponent>}

仅当yearlyExpenses 至少有一个元素时，才会呈现子元素。