反应 useContext() 返回未定义

Question

我的上下文提供程序有这个代码，我有我的组件，但是当我尝试使用 useProductState 或 useProductDispatch 在孩子中使用它时，它返回未定义（抛出错误）；

import React from "react";

import productsReducer from "./productsReducer";

const ProductsStateContext = React.createContext();

const ProductsDispatchContext = React.createContext();

const initialState = {

  restaurantTitle: "",

  restaurantId: "VljSa5Eakepw9QkTAUOW",

  productsCollection: "",

  categories: [],

  defaultCategory: "",

  isLoading: true,

};

function ProductsProvider({ children }) {

  const [state, dispatch] = React.useReducer(productsReducer, initialState);

  return (

    <ProductsStateContext.Provider value={state}>

      <ProductsDispatchContext.Provider value={dispatch}>

        {children}

      </ProductsDispatchContext.Provider>

    </ProductsStateContext.Provider>

  );

}

function useProductsState() {

  const context = React.useContext(ProductsStateContext);

  if (context === undefined) {

    throw new Error("useProductsState must be used within a ProductsProvider");

  }

  return context;

}

function useProductsDispatch() {

  const context = React.useContext(ProductsDispatchContext);

  if (context === undefined) {

    throw new Error(

      "useProductsDispatch must be used within a ProductsProvider"

    );

  }

  return context;

}

export { ProductsProvider, useProductsState, useProductsDispatch };

有人可以解释这是如何工作的吗，我正在尝试访问状态并分派到一个功能组件中，该组件是 .

Answer 1

您应该等待回复fetchRestaurantData：const fetchRestaurantData = async (state, value) => {&nbsp; // add async keyword to the function&nbsp;&nbsp; let newState = state;&nbsp; return await axios&nbsp; // here add await&nbsp;&nbsp; &nbsp; .post(api.routes.restaurant, { restaurantId: state.restaurantId })&nbsp; &nbsp; .then((res) => {&nbsp; &nbsp; &nbsp; newState.restaurantTitle = res.data.restaurantTitle;&nbsp; &nbsp; &nbsp; res.data.categories.forEach(&nbsp; &nbsp; &nbsp; &nbsp; (category) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (newState.categories[category] = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loaded: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; props: [],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; newState.defaultCategory = res.data.categories[0];&nbsp; &nbsp; &nbsp; newState.productsCollection = res.data.productsCollection;&nbsp; &nbsp; &nbsp; newState.isLoading = false;&nbsp; &nbsp; &nbsp; return axios.post(api.routes.category, {&nbsp; &nbsp; &nbsp; &nbsp; productsCollection: res.data.productsCollection,&nbsp; &nbsp; &nbsp; &nbsp; categoryId: newState.defaultCategory,&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; })&nbsp; &nbsp; .then((res) => {&nbsp; &nbsp; &nbsp; newState.categories[newState.defaultCategory].props =&nbsp; &nbsp; &nbsp; &nbsp; res.data[newState.defaultCategory];&nbsp; &nbsp; &nbsp; newState.categories[newState.defaultCategory].loaded = true;&nbsp; &nbsp; &nbsp; console.log(newState);&nbsp; &nbsp; &nbsp; return newState;&nbsp; &nbsp; });};