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

【问题标题】：How can i update context value with the state value如何使用状态值更新上下文值
【发布时间】：2021-06-25 02:39:39
【问题描述】：

我可以接收到正确的对象，但是我不能用状态值更新的对象更新上下文值

在：

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

我要制作主题：dark，成为，主题：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>
  )
}

【问题讨论】：

标签： reactjs use-state use-context

【解决方案1】：

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

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

Codesandbox

【讨论】：