Question

我遇到一个问题，当我尝试通过react钩子更新上下文时，上下文没有得到更新。我已经在下面发布了代码，感觉好像漏了一点点。

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);

我已经删除了上下文并检查了钩子是否可以在本地状态下工作并且确实进行了更新，可惜这不是我想要的结果。

任何帮助将不胜感激。

谢谢。

Answer 1

不确定这是否有帮助，但是我已经创建了您要尝试执行的操作的版本（抱歉，没有在Typescript中使用），只需单击按钮即可将isNightMode的值从true切换为false。

我已将“上下文”和“提供程序”代码移到了单独的文件中，但这就是我喜欢我的代码的方式。

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

如何修复setState在React上下文中不更新

1 个答案: