App.tsx 没有收到更新为新状态的上下文

Question

我想在导航栏中切换应用程序将应用的主题，我可以正常更新 defaultTheme 的消费者和提供者的上下文，但我的应用程序没有更新此信息。

我已经通过控制台记录了一些组件，看看它们是否正在接收我的上下文更新，一切正常，但在我的 App.tsx 中，上下文只发送第一个状态，所有更新都不是'它收到了 t

context.js

const Context = createContext({
  defaultTheme: dark,
  toggleTheme: () => {},
});

export function ThemeContextProvider({ children }) {
  const [theme, setTheme] = useState(dark);

  function toggleTheme() {
    setTheme(theme === dark ? light : dark);
  }
  
  return (
    <Context.Provider value={{ defaultTheme: theme, toggleTheme }}>
    {children}
    </Context.Provider>
  )
}

export function useTheme() {
  const theme = useContext(Context)

  return theme;
}

App.tsx

function App() {
  const { defaultTheme } = useTheme();

  return (
    <ThemeContextProvider>
      {defaultTheme.title === 'dark' ? (
        <ThemeProvider theme={dark}>
          <GlobalStyle />
          <Routes />
        </ThemeProvider>
      ) : (
        <ThemeProvider theme={light}>
          <GlobalStyle />
          <Routes />
        </ThemeProvider>
        ) }
    </ThemeContextProvider>

  );
}

Navbar.tsx

 const { colors } = useContext(ThemeContext);
  const { defaultTheme, toggleTheme } = useTheme();

  return (
    <div id='navbar'>
      <div className='navbar-container'>

          <div className='theme-switcher'>
            { defaultTheme.title === 'dark' ? <RiMoonClearFill /> : <RiMoonClearLine />}
            <Switch
              onChange={toggleTheme}
              checked={defaultTheme.title === 'light'}
              checkedIcon={true}
              uncheckedIcon={false}
              height={10}
              width={40}
              handleDiameter={20}
              offHandleColor={colors.main}
              onHandleColor={colors.text}
              offColor={colors.background}
              onColor={colors.main}
            />
            { defaultTheme.title === 'light' ? <FaSun /> : <FaRegSun />}
          </div>
...

Answer 1

App.tsx 未包含在 ThemeContextProvider 中，因此您无法访问 App.tsx 中的上下文值。它的上下文值只能被 ThemeContextProvider 环绕的子组件访问。

所以我建议您将整个块移动到一个新组件并在该子组件内调用 useTheme()。

<ThemeProvider theme={defaultTheme.title === 'dark' ? dark : light}>
  <GlobalStyle />
  <Routes />
</ThemeProvider>

并且我已经对您的条件渲染进行了更改，以使其更加紧凑和可读。

App.tsx 没有收到更新为新状态的上下文

App.tsx didn't receive the context updated with a new state

reactjs

themes

use-state

use-context