如何修复 setState 在反应上下文中不更新答案

【问题标题】：How to fix setState not updating in react context如何修复 setState 在反应上下文中不更新
【发布时间】：2019-08-11 22:41:20
【问题描述】：

我遇到了一个问题，当我尝试通过反应钩子更新我的上下文时，它没有得到更新。我已经发布了下面的代码，感觉我可能遗漏了一点点。

appContext.tsx


import React, { useState } from "react"
import { ICreateContext } from "../types/generics"

export interface IAppProviderState {
  isNightMode: boolean
}

const defaults = { isNightMode: false }
const AppContext = React.createContext<ICreateContext<IAppProviderState>>([
  defaults,
  () => null,
])

const AppProvider = (props: { children?: JSX.Element }) => {
  const [state, setState] = useState<IAppProviderState>({
    isNightMode: defaults.isNightMode,
  })

  return (
    <AppContext.Provider value={[state, setState]}>
      {props.children}
    </AppContext.Provider>
  )
}

export { AppContext, AppProvider }

appStore.tsx


import { useContext } from "react"
import { AppContext, IAppProviderState } from "../contexts/appContext"

function useAppStore() {
  const [state, setState] = useContext(AppContext)

  function toggleNightMode(bool: boolean) {
    setState({
      isNightMode: bool,
    })
  }

  return {
    toggleNightMode,
    state,
  }
}

export { useAppStore }

// somewhere in the view I use the useAppStore hook.
// but using the method toggleNightMode, even though fires off on
// appStore.tsx - is not updating the root context state.

const { state, toggleNightMode } = useAppStore()

//..e.g

toggleNightMode(true);

我已经删除了上下文并检查了钩子是否适用于本地状态并且它确实更新了，遗憾的是这不是我想要的结果。

任何帮助将不胜感激。

谢谢。

【问题讨论】：

1.你用错误的参数调用toggleNightMode（你至少应该看到一个ts错误）2.toggleNightMode忽略了传递给它的标志
谢谢我为了更清晰而更新了，即使我传递了正确的参数它仍然没有更新

标签： reactjs typescript react-hooks

【解决方案1】：

不确定这是否会有所帮助，但我已经创建了一个你正在尝试做的版本（抱歉不是在 Typescript 中），它只是通过单击按钮将 isNightMode 的值从 true 切换为 false。

我已将 Context 和 Provider 代码移动到单独的文件中，但这正是我更喜欢我的代码的方式。

https://codesandbox.io/s/wizardly-elbakyan-i6umw

【讨论】：

这有用吗？
对我没有任何帮助
因为你看不到屏幕上的状态变化@evanjmg？