Question

基本上，在我的App.js中，我需要调用useFetch两次以显示两个表的Spinner / data / error。

我该如何区分哪个表的微调器/数据/错误？因为在useEffect我要返回 {数据，加载，错误} ，在App.js中，我得到的值如下： const {数据，加载，错误} = 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 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.loading和orderData.error等的对象。

尽管这不是很干净。另一种方法是为每个数据，加载和错误添加不同的变量名称，方法是在变量后缀数字：

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

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

3 个答案: