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

Question

im使用react上下文在组件之间共享用户名。我有3页：-app.js-登录(更改用户名的位置(-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
/>

我尝试以以下方式查看第1页中的更新值：

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

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

有人知道它为什么会发作吗？

我的UserContext文件：

import React from 'react';
const UserContext = React.createContext(null);
export { UserContext };

(我试着把提供者标签放在路由器外面，但还是没用(。

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