React Native 与 Context API 警告：“允许需要循环，但可能导致未初始化的值......”

Question

当我在 Expo React Native 项目中使用 React 的 Context API 时收到此警告：

允许需要循环，但可能导致未初始化的值。考虑重构以消除对循环的需要。

我在 App.tsx 中创建了一个上下文：

import Start from "./start";

export const AppContext = React.createContext({
  isLandscape: true,
});

export default function App() {
  return (
    <AppContext.Provider value={{ isLandscape: false }}>
      <Start />
    </AppContext.Provider>
  );
}

在 Start.tsx 组件中，我使用了上下文：

import { AppContext } from "./App"

export default function App() {
  const context = React.useContext(AppContext);
  console.log(context);

  return (
    <Text>Sutff</Text>
  );
}

我看起来警告是因为App导入Choose然后App再次导入上下文。允许需要循环，但可能导致未初始化的值。考虑重构以消除对循环的需要

然而，这不是应该如何使用 Context API 的吗？在 React Native 中使用 Context API 时，人们通常如何处理这个问题？

Answer 1

要中断循环，请将共享上下文移至单独的文件。

// in AppContext.js

export const AppContext = React.createContext({
  isLandscape: true,
});

然后在App.jsand 中Start.js，从该文件导入上下文。

import { AppContext } from './AppContext'

因此，您现在拥有 App -> AppContext 和 Start -> AppContext，而不是让 App <-> Start 相互依赖，从而打破了循环。