如何区分来自 useFetch 自定义钩子的不同响应

Question

基本上在我的 App.js 中，我需要调用 useFetch 两次来显示两个表的微调器/数据/错误。

如何区分哪个微调器/数据/错误是针对哪个表的？因为在 useEffect 我回来了 { data, loading, error }，在 App.js 中，我得到的值是这样的 const { data, loading, error } = useFetch(url_order, date)。但我想要 const { data_table1, loading_table1, error_table1 } = useFetch(url_order, date)。

这是我的 useFetch 自定义钩子

import { useState, useEffect } from "react";

export default function useFetch(url, date) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    const doFetch = async () => {
      setLoading(true);
      try {
        const res = await fetch(url);
        const json = await res.json;
        setData(json.result.result);
      } catch (error) {
        setError(true);
      }
      setLoading(false);
    };
    doFetch();
  }, [date]);

  return { data, loading, error };
}

这是我的 App.js

import React from "react";
import useFetch from "./hooks/useFetch";
import OrderTable from "./OrderTable";
import IngredientTable from "./IngredientTable";

const App = () => {
  const { data, loading, error } = useFetch(url_order, date);
  const { data, loading, error } = useFetch(url_ingredient, date);

  return (
    <div>
      {loading ? (
        <BeatLoader css={override} color={"#36D7B7"} loading={loading} />
      ) : error ? (
        <h3>Failed to fetch data for Order's table</h3>
      ) : (
        <OrderTable data={data} />
      )}

      {loading ? (
        <BeatLoader css={override} color={"#36D7B7"} loading={loading} />
      ) : error ? (
        <h3>Failed to fetch data for Ingredient's table</h3>
      ) : (
        <IngredientTable data={data} />
      )}
    </div>
  );
};

export default App;

Answer 1

另一个简单的解决方案是像这样重命名解构的道具：

const { data: order_data, loading: order_loading, error: order_error } = useFetch(url_order, date);
const { data: ingredient_data, loading: ingredient_loading, error: ingredient_error } = useFetch(url_order, date };

现在您可以访问：

order_data
order_loading
order_error 
ingredient_data
ingredient_loading
ingredient_error

Answer 2

如果你写：

const order_table = useFetch(url_order, date);
const ingedient_table = useFetch(url_ingredient, date);

现在您可以访问：

order_table.data
order_table.error
order_table.loading

ingedient_table.data
ingedient_table.error
ingedient_table.loading

Answer 3

您的 useFetch 归根结底只是一个函数。您可以利用这一点 - 在您的应用程序组件中，通过调用 useFetch 来设置具有不同名称的初始状态，如下所示：

const [orderData,setOrderData] = useState(useFetch(url_order, date));
const [ingredientData,setIngredientData] = useState(useFetch(url_ingredient, date));

现在orderData 和ingredientData 是具有orderData.data、orderData.loading 和orderData.error 等的对象。

虽然这不是很干净。另一种方法是为每个数据、加载、错误添加不同的变量名称，并在它们后面加上数字：

 const { data1, loading1, error1 } = useFetch(url_order, date);
  const { data2, loading2, error2 } = useFetch(url_ingredient, date);