#reactjs #react-native
#reactjs #реагирующий-родной
Вопрос:
В настоящее время я пытаюсь использовать контекст в приложении 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
Ответ №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 точно так же, как вы получаете доступ к любому состоянию.
Комментарии:
1. могу ли я переместить свою логику, которая устанавливает текущего пользователя в app.js файл?
2. обновил мой ответ, вы можете получить доступ к setCurrentUser через контекст в любом компоненте дерева
3. никогда не думал о таком доступе к контексту, очень круто
4. Я вижу, что вы собираетесь использовать это для навигации, вы можете сослаться на мой пример, если вам нужно snack.expo.io/@guruparan/rnn-v5