我的 React Context 在 fetch 中传递路由参数时出现问题

Question

我的 React 项目中的 Context 有问题。因此，我在后端和前端的路由是相同的，并且在路由中，我有与另一个组件中的 useParams 一起获取的categoryName 和 itemName，识别它们不是问题，但是当我将这些 URL 的获取放入我的上下文，它不起作用，它在 URL 中显示未定义。因此，订单和项目的获取在组件本身中工作，但是当我在上下文中使用时，路线未定义。我需要解决这个问题，因为我需要在几乎所有页面中使用它们，所以我不能使用 fetch 几次？

export const Context = React.createContext();

const FetchContextProvider = ({ children }) => {
  const { categoryName, itemName } = useParams();

  const [categories, setCategories] = useState([]);
  const [items, setItems] = useState([]);
  const [suppliers, setSuppliers] = useState([]);
  const [orders, setOrders] = useState([]);
  const [activities, setActivities] = useState([]);

  useEffect(() => {
    const fetchCategories = async () => {
      //the code
    };

    const fetchItems = async () => {
       try {
         const response = await fetch(
           `http://127.0.0.1:10003/inventory/${categoryName}`,
           {
             headers: {
               Authorization: `Bearer ${localStorage.getItem("token")}`,
             },
           }
         );
         console.log("Fetching items for category:", categoryName);

         const itemsData = await response.json();

         if (response.ok) {
           console.log("API Response for items:", itemsData);
          setItems(itemsData.data);
         } else {
           console.log("Error - items");
         }
       } catch (err) {
         console.log("Error fetching items.", err);
       }
     };

    const fetchSuppliers = async () => {
      //the code
    };

    const fetchOrders = async () => {
       try {
         const response = await fetch(
           `http://127.0.0.1:10004/inventory/${categoryName}/${itemName}`,
           {
             headers: {
               Authorization: `Bearer ${localStorage.getItem("token")}`,
             },
           }
         );
         console.log("Fetching orders for category:", categoryName);
         console.log("Fetching orders for an item:", itemName);

         const ordersData = await response.json();

         if (response.ok) {
           console.log("API Response for orders:", ordersData);
           setOrders(ordersData.data);
         } else {
           console.log("Error");
         }
       } catch (err) {
         console.log("Error fetching orders.", err);
       }
     };

    const fetchActivities = async () => {
      ..code
    };

    fetchCategories();
    fetchItems();
    fetchSuppliers();
    fetchOrders();
    fetchActivities();
  }, [categoryName, itemName]);

  return (
    <Context.Provider value={{ categories, items, orders, suppliers, activities }}>
      {children}
    </Context.Provider>
  );
};

export default FetchContextProvider;

期望在上下文中识别 :categoryName 和 :itemName 是什么，以便它可以获取并在前端显示结果。

Answer 1

您似乎正在尝试在 React Router Route 组件之外使用

useParams()

，这可能会导致问题。 useParams() 通常在由 Route 组件呈现的组件中使用，以访问 URL 中的参数。

解决此问题的一种方法是将获取逻辑移至您有权访问的组件中

useParams()

。但是，由于您提到需要在多个组件中使用此数据，因此您可以创建一个自定义挂钩来封装获取逻辑并使用

useParams()

。

这是一个例子：

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

const useFetchData = () => {
  const { categoryName, itemName } = useParams();
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          `http://127.0.0.1:10003/inventory/${categoryName}`,
          {
            headers: {
              Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
          }
        );

        const data = await response.json();

        if (response.ok) {
          setData(data.data);
        } else {
          console.log("Error fetching data");
        }
      } catch (err) {
        console.log("Error fetching data.", err);
      }
    };

    fetchData();
  }, [categoryName, itemName]);

  return data;
};

export default useFetchData;

然后，在你的组件中，你可以使用这个钩子：

import React from 'react';
import useFetchData from './useFetchData';

const MyComponent = () => {
  const data = useFetchData();

  // Render your component with the fetched data
};

export default MyComponent;

通过这种方式，您可以将获取逻辑封装到可重用的钩子中，并且可以在有权访问

useParams()

钩子的任何组件中使用它。