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

Question

我正在使用 React 上下文以便在组件之间共享用户名。我有 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);

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

有谁知道它变黑的原因是什么？

我的 UserContext 文件：

import React from 'react';

const UserContext = React.createContext(null);

export { UserContext };

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

Answer 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>

单击 Link Sign In 更改您的 TextField 值。现在点击 Page 1 link 。您应该看到上下文值在路由之间得到反映。

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

implementation of react context doesn't work

javascript

reactjs

react-redux

react-context

react-hooks