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

Question

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

如何区分哪个微调器/数据/错误适用于哪个表？因为在使用效果我回来了{ data， load， error }， 在 App.js 中，我得到的值像const { data， load， 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 };
}

这是我的应用程序.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 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 2

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

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 3

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

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

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

虽然这不是很干净。另一种方法是为每个数据使用不同的变量名称，加载，错误，通过用数字后缀它们：

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