React 上下文状态未更新

Question

我有一个 next.js 应用程序，我在其中尝试使用反应上下文来导出状态。但是，状态不会更新并保持为 createContext 挂钩设置的初始值，在这种情况下未定义。我做错了什么吗？

这是我创建上下文的文件：

import { NextPage } from 'next';
import {
  useState,
  SyntheticEvent,
  createContext,
  useContext,
  ReactNode,
} from 'react';
import { TimeZoneType } from '../CompetitionList/types';

interface Props {
  children: ReactNode;
}

type ContextType = {
  timeZone: TimeZoneType;
  handleTimeZone: (_event: SyntheticEvent, _newZone: TimeZoneType) => void;
};

const TimeZone = createContext<ContextType>({} as ContextType);

const TimeZoneState: NextPage<Props> = ({ children }) => {
  const [timeZone, setTimeZone] = useState<TimeZoneType>('Local');
  const handleTimeZone = (_event: SyntheticEvent, newZone: TimeZoneType) => {
    if (newZone !== null) {
      setTimeZone(newZone);
    }
  };
  return (
    <TimeZone.Provider value={{ timeZone, handleTimeZone }}>
      {children}
    </TimeZone.Provider>
  );
};

export const useTimeZone = () => {
  return useContext(TimeZone);
};

我调用上下文类似这样：

import { useTimeZone } from '../components/GlobalVariables/TimeZone';
...

const { timeZone, handleTimeZone } = useTimeZone();
console.log({timeZone})
//returns undefined

对不起，如果这是一个糟糕的问题，这是我的第一个问题。

Answer 1

我想我找到了解决方法。我只需要将我的 TimeZone.Provider 包裹在我想使用上下文的组件周围。因此，我导出了 TimeZoneState 函数并将其包裹在 _app.tsx 中的页面组件中，如下所示：

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <TimeZoneState>
      <Component {...pageProps} />
    </TimeZoneState>
  );
};

export default MyApp

这让我可以随心所欲地在页面中使用我的上下文。

import { useTimeZone } from '../components/GlobalVariables/TimeZone';
...

const { timeZone, handleTimeZone } = useTimeZone();

React 上下文状态未更新

React context state is not being updated

typescript

reactjs

next.js

use-state

use-context