React 状态已更新，但未在另一个组件中重新渲染

Question

我正在使用 React Native，并且有一个名为

useNightMode

的自定义钩子。我的自定义钩子中有一个状态如下：

const [isInNightModeHours, setIsInNightModeHours] = useState(false)

在根组件（AppWrapper）中，我使用以下自定义挂钩只是为了查看重新渲染：

useEffect(() => {
  console.log('AppWrapper ', isInNightModeHours)
}, [isInNightModeHours])

如果我直接从自定义挂钩更新我的状态，这将被重新渲染。但我需要从组件更新它，如下所示。 我的组件：

const updateBrigthnessIfNeeded = () => {
  updateIsInNightModeHours(true)
}

这是我的 App.tsx，用于查看我们如何使用 AppWrapper：

<ThemeProvider theme={Theme}>
  <LocalizationProvider>
    <NavigationContainer onReady={onNavigationReady} ref={navigationRef}>
      <PlatformStatusBar hidden={true} />
      <AppWrapper>
        <AppNavigator />
      </AppWrapper>
      <ApiEnvText API_ENV={API_ENV} />
      <SyncState syncing={syncing} />
      <AppError />
    </NavigationContainer>
  </LocalizationProvider>
</ThemeProvider>

在这种情况下，AppWrapper 不会重新渲染。有什么想法吗？

Answer 1

我有几种方法可以处理此类错误，但它们可能不适用于您当前的设置。

第一 - 您可以尝试使用 useContext 从 Wapper 级别向下到任何子组件。这意味着通过上下文变量对“状态”的更改将在引用上下文变量的任何组件上更新。 [useContext][1]https://react.dev/reference/react/useContext

第二 - 如果状态更改时元素未渲染，您可以尝试修改要重新渲染的组件的键。更改组件的键将导致重新渲染。

鉴于缺乏额外的上下文，这是我目前可以提供的最佳解决方案，但我希望它有所帮助。