Блог

В настоящее время я пытаюсь использовать контекст в приложении react native. Мой контекстный код выглядит следующим образом:

 import React, { useState, createContext } from 'react'

export const AuthContext = createContext()

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null)

return (
    <AuthContext.Provider value={{ currentUser}}>
      {children}
    </AuthContext.Provider>
  )
}
 

Затем я импортирую контекст в свой App.js и оберните мою App.js в провайдере вроде так:

 import React, { useContext } from 'react'
import { AuthProvider, AuthContext } from './src/Context/AuthContext'
other imports etc...

export default function App() {
  const { currentUser } = useContext(AuthContext)
  return (
    <>
      <AuthProvider>
        <IconRegistry icons={EvaIconsPack} />
          <NavigationContainer>
            <RootStackScreen isAuth={false} />
          </NavigationContainer>
      </AuthProvider>
    </>
  )
}
 

когда я пытаюсь получить доступ к CurrentUser в app.js Я получаю следующую ошибку:

 component exception: undefined is not an object, evalauting useContext.currentUser
 

Если я попытаюсь получить доступ к текущему пользователю в других компонентах моего приложения; однако я не получаю эту ошибку, и консоль CurrentUser регистрирует правильное значение null. Тогда мне интересно, как я могу получить доступ к контексту в app.js . можно ли обернуть нативное приложение с реакцией index.js в провайдере аутентификации? или я делаю что-то не так с точки зрения контекста.

версия react-native: 0.63.3 версия react: 16.13.1

Это происходит потому, что вы обращаетесь к контексту вне поставщика.

Если вы проверяете свой createContext, вы не указываете значение по умолчанию.

 export const AuthContext = createContext(/*No default value*/)
 

Когда useContext вызывается вне поставщика, он будет использовать значение по умолчанию, в вашем случае его ‘undefined’, и выдает ошибку при попытке доступа к свойству CurrentUser из undefined .

Один из способов решить эту проблему — использовать состояние в app.js файл вместо отдельного компонента поставщика.

 export default function App() {
  
  const [currentUser, setCurrentUser] = useState(null);
  const state={currentUser, setCurrentUser};

  return (
    <>
        <AuthContext.Provider value={state}>
        <IconRegistry icons={EvaIconsPack} />
          <NavigationContainer>
            <RootStackScreen isAuth={false} />
          </NavigationContainer>
        </AuthContext.Provider 
    </>
  )
}
 

Это не окажет никакого влияния на другие компоненты, а также вы сможете легко получить доступ к переменной CurrentUser точно так же, как вы получаете доступ к любому состоянию.