反应上下文的实现不起作用答案

【问题标题】：implementation of react context doesn't work反应上下文的实现不起作用
【发布时间】：2021-05-24 12:21:50
【问题描述】：

我使用反应上下文来在组件之间共享用户名。我有 3 页： -app.js -signIn（更改用户名的地方） -page1（我想在哪里看到更新的用户名）

正如本教程（以及许多其他视频）所说，我完全做到了： 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
                        />

我尝试通过以下方式查看 page1 中的更新值：

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

但是一旦我加载 page1，用户名就会改回默认值（在登录页面中，用户名会更新）

有谁知道发生这种情况的原因可能是什么？

我的 UserContext 文件：

import React from 'react';

const UserContext = React.createContext(null);

export { UserContext };

（我试过把provider标签放在路由器外面，还是不行）。

【问题讨论】：

能否在 github 或 codesandbox.io 中分享您的代码库并分享链接，如果您正在重新加载页面？在更改 URL [从，登录到 Page1] 时，上下文将被重置，它不会在页面重新加载时持续存在，

标签： javascript reactjs react-redux react-hooks react-context

【解决方案1】：

看起来您正在通过为每条路线重新加载页面来测试该值。当您刷新时，您正在渲染一个全新的 App 。因此，您需要在不刷新页面的情况下在路线之间移动。

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 更改您的TextField 值。现在单击Page 1 链接。您应该会看到上下文值在路由之间得到反映。

【讨论】：