如何修复未在反应上下文中更新的 setState

debugcn 发表于 Dev

用户3229616

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

应用上下文.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 }

应用商店.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);

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

任何帮助将非常感激。

谢谢。

乔恩·B

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。