Контекст не обновляет состояние после инициализации
Суть проблемы: Состояние (state) в App (см. код#1) не обновляется.
Функция useParameter - контекст (см. код#2) на хуке ParameterHook (см. код#3), у которого есть State, который я и импортирую.
Подключение контекста происходит в ContextContainer (см. код#4) и проблема точно не в нём, остальные контексты работают.
Причина некорректной работы: Поверхностную причину я понимаю - state видимо инициализируется только после импорта, но при этом установка стандартного значения в createContext не спасает ситуацию.
Заранее благодарю за помощь <3
export const App = () => {
const { isLoaded } = useParameter();
return (
<BrowserRouter>
<ContextContainer>
<header>
<NavigationComponent/>
</header>
{ !isLoaded ? <LoadingComponent/> : "" }
</ContextContainer>
</BrowserRouter>
)
}
const ParameterContext = createContext({ });
export const useParameter = () => {
return useContext(ParameterContext);
}
export const ParameterProvider = ({ children }) => {
return (
<ParameterContext.Provider value={{ ...ParameterHook() }}>
{ children }
</ParameterContext.Provider>
)
}
export const ParameterHook = () => {
const [isLoaded, setLoaded] = useState(false);
return { isLoaded, setLoaded };
}
export default ({ children }) => {
return (
<ParameterProvider>
<APIProvider>
<AnimationProvider>
{ children }
</AnimationProvider>
</APIProvider>
</ParameterProvider>
)
}
Ответы (1 шт):
Автор решения: xydope
→ Ссылка
У вас App является родителем ContexProvider, а должен быть потомком.
const App = () => {
const { isLoaded } = useParameter();
return (
<BrowserRouter>
/*<ContextContainer> необходимо перенести на уровень выше*/
<header>
<NavigationComponent/>
</header>
{ !isLoaded ? <LoadingComponent/> : "" }
/*</ContextContainer> необходимо перенести на уровень выше*/
</BrowserRouter>
)
}
/* Здесь App является потомком ContextContainer*/
const AppWithContext = () => (
<ContextContainer>
<App />
</ContextContainer>
)