Блог

Главная - Вопросы по программированию - реализация контекста react не работает

реализация контекста react не работает

#javascript #reactjs #react-redux #react-hooks #react-context

Вопрос:

я использую контекст реакции, чтобы поделиться именем пользователя между компонентами. У меня Есть 3 страницы: -app.js -Вход(где имя пользователя изменено) -страница 1(где я хочу увидеть обновленное имя пользователя)

Я сделал именно так, как сказано в этом уроке(и во многих других видео): https://codingshiksha.com/react/react-js-usecontext-hook-login-user-and-storing-it-example-tutorial-for-beginners-2020/

В моем app.js я определил состояние следующим образом:

     const [user, setUser] = useState();
        return (      
            <Router>
                <Switch>
                <UserContext.Provider value={{user,setUser}}>
                    <Route path="/page1">
                        <page1 />
                    </Route>
                    <Route path="/SignIn">
                        <SignIn />
                    </Route>
                    </UserContext.Provider> 
                </Switch>
            </Router>

На странице входа в систему я обновил имя пользователя следующим образом:

     const {user,setUser} = useContext(UserContext);
    
    <TextField
                            variant="outlined"
                            margin="normal"
                            required
                            fullWidth
                            id="username"
                            label="Username"
                            name="username"
                            value={user}
                            onChange={(e) => setUser(e.target.value)}
                            autoComplete="username"
                            autoFocus
                        />

И я попытался увидеть обновленное значение на странице 1 следующим образом:

   const {user} = useContext(UserContext);
    console.log(user);

Но как только я загружаю страницу 1, имя пользователя возвращается к значению по умолчанию(на странице входа имя пользователя обновляется).

Кто-нибудь знает, в чем может быть причина этого хеппенса?

мой текстовый файл пользователя:

 import React from 'react';

const UserContext = React.createContext(null);

export { UserContext };

(Я попытался поместить тег провайдера за пределы маршрутизатора, но он все равно не работал).

Комментарии:

1. можете ли вы поделиться своей кодовой базой на github или codesandbox.io и поделитесь ссылкой, если вы перезагружаете страницу? при изменении URL-адреса [с, вход на страницу 1], контекст будет сброшен, он не сохраняется при перезагрузке страницы,

Ответ №1:

Похоже, вы проверяете значение, перезагружая страницу для каждого маршрута . Когда вы обновляете, вы создаете совершенно новое приложение . Итак, что вам здесь нужно, так это перемещаться между маршрутами без обновления страницы.

 import { .... , Link } from 'react-router-dom'

<UserContext.Provider value={{ user, setUser }}>
  <Router>
    <Link to="/page1">Page 1</Link>
    <Link to='/SignIn'>Sign In</Link>
    <Switch>
      <Route path="/page1">
        <page1 />
      </Route>
      <Route path="/SignIn">
        <SignIn />
      </Route>
    </Switch>
  </Router>
</UserContext.Provider>

Нажмите на ссылку Sign In изменить значение текстового поля . Теперь нажмите на Page 1 ссылку . Вы должны увидеть, как значение контекста отражается между маршрутами .

Метки: