Реагируйте на Native с предупреждениями Context API: «Требуются циклы, но они могут привести к неинициализированным значениям ...»

Question

Когда я использую React Context API в моем проекте Expo React Native, появляется это предупреждение:

Требуются циклы, но они могут привести к неинициализированным значениям. Рассмотрите возможность рефакторинга, чтобы устранить необходимость в цикле.

Я создаю контекст в 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? Как люди обычно справляются с этим при использовании Context API в React Native?

Answer 1

Чтобы разорвать цикл, переместите общий контекст в отдельный файл.

// in AppContext.js

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

, а затем в App.js и Start.js импортируйте контекст из этого файла.

import { AppContext } from './AppContext'

Таким образом, вместо того, чтобы App <-> Start зависели друг от друга, теперь у вас есть App -> AppContext и Start -> AppContext, тем самым нарушая цикл.