CodeSandbox 中的 React 上下文

Question

我在使用 CodeSandbox 时遇到 React Context 问题。

我的基本示例：

App.js

import React, { useEffect, useContext } from "react";
import { FirmsContext } from "./FirmsContext";

export default function App() {
const { firms, fetchFirms } = useContext(FirmsContext);

  useEffect(() => {
   (async function getFirms() {
    await fetchFirms();
   })();
  }, [fetchFirms, firms]);

return (
 <div>
 </div>
);
}

FirmsConext.js

import React, { createContext, useReducer } from "react";
import FirmsReducer from "./FirmsReducer";

// INIT STATE
const initalState = {
 firms: []
};

// CREATE CONTEXT
export const FirmsContext = createContext(initalState);

// PROVIDER COMPONANT
export const FirmsProvider = ({ children }) => {
 const [state, dispatch] = useReducer(FirmsReducer, initalState);

 async function fetchFirms() {
  try {
   let response = await fetch("https://pokeapi.co/api/v2/pokemon-species/");
    dispatch({
     type: "GET_FIRMS",
     payload: response.result
    });
  } catch (err) {
    console.log(err);
   }
 }

return (
  <FirmsContext.Provider
    value={{
      firms: state.firms,
      fetchFirms
    }}
  >
    {children}
  </FirmsContext.Provider>
);
};

FirmsReducer.js

export default (state, action) => {
 switch (action.type) {
  case "GET_FIRMS":
    return {
      ...state,
      loading: false,
      firms: action.payload
    };
  default:
    return state;
 }
};

我收到以下错误： fetchFirms 不是函数

这出现在 app.js

中的 useEffect 挂钩上

   9 | 
  10 | useEffect(() => {
  11 |   (async function getFirms() {
> 12 |     await fetchFirms();
     |          ^
  13 |   })();
  14 | }, [fetchFirms, firms]);
  15 |

我在其他地方有非常相似的代码工作正常，所以不确定这是 CodeSandbox，还是我只是遗漏了什么？

Answer 1

如果您想使用提供商提供的值，您需要使 <App /> 成为 <FirmsProvider /> 的后代，就像这样

<FirmsProvider>
  <App />
</FirmsProvider>

否则您只会看到创建上下文时使用的初始值。

CodeSandbox 中的 React 上下文

React Context in CodeSandbox

reactjs

codesandbox

react-context

react-hooks