时间戳

首页 > 解决方案 > 如何修复 setState 在反应上下文中不更新

reactjs - 如何修复 setState 在反应上下文中不更新

问题描述

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

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 }

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

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

任何帮助将非常感激。

谢谢。

标签： reactjstypescriptreact-hooks

解决方案

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

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

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

推荐阅读