我如何使用状态值更新上下文值

Question

我可以接收到正确的对象，但我无法使用状态值已更新的对象来更新上下文值

在：

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

我要制作主题：dark, become, theme: defaultTheme, useState修改动态值

import React, { createContext, useState } from 'react';

import light from '../themes/light';
import dark from '../themes/dark';

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

export default Context;

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

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

Answer 1

您正在将 undefined 值传递给上下文提供程序。（theme 在 ThemeContextProvider 组件 中未定义）。您需要改为传递 defaultTheme。

<Context.Provider value={{ theme: defaultTheme, toggleTheme }}>
    {children}
</Context.Provider>

Codesandbox

我如何使用状态值更新上下文值

How can i update context value with the state value

reactjs

use-state

use-context