无法获取上下文 api 值

Question

我是反应 js 的新手。我从“https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c”复制了代码。

当我尝试读取状态提供程序中的上下文 api 值时（状态更新后），这些是未定义的。我能够从 stateConsumer 函数中获得正确的值。 StateContext 在这里是全局对象。

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => {
  console.log(useStateValue());
  return (
    <StateContext.Provider value={useReducer(reducer, initialState)}>
      {children}
    </StateContext.Provider>
  );
}

export const stateConsumer = () => {
  //console.log("SC",useContext(StateContext));
  return useContext(StateContext);
}

Answer 1

使用this upmostly article 中的示例，我认为您需要稍微修改一下：

export const StateContext = createContext([{}, () => {}]);

export const StateProvider = ({ reducer, initialState, children }) => {
  const [state, setState] = useContext(StateContext);

  return (
    <StateContext.Provider=value={[value, setState]}>
      {children}
    </StateContext.Provider>
  );
};

它更详细地介绍了使用状态和上下文，您应该阅读更多内容以充实您的代码。公平地说，这是一本复杂的读物，但很有趣。