Reactjs:更新多个组件共享的上下文API时出现问题

Question

在我的react应用程序中，我有登录页面和仪表板。我想显示用户名，从登录页面获取到仪表板使用上下文API。

以下是我的App.js代码:

import React from 'react';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import Dashboard from './Dashboard';
import Login from './Login'

import {UserContextProvider} from './context/UserContextManagement'
const DashboardPage = () => (<Dashboard />);
const LoginPage = () => (<Login />);
function App() {
return (

<Router>
<UserContextProvider>
<Route path="/login" component={LoginPage} />
<Route path="/dashboard" component={DashboardPage} />

</UserContextProvider>

</Router>
);
}
export default App;

以下是我的Login.js代码:

import {UserContext} from '../../context/UserContextManagement'
function Login() {
const {setUsernm}=React.useContext(UserContext);
const handleSubmit = (e) => {
e.preventDefault(); 
window.location = '/dashboard';
}

return (
<div>
<form>
<input type="text" onChange={e => {setUsernm(e.target.value)}}/>
<input type="text" onChange={e => setPwd(e.target.value)} />
<button type="submit">Sign In </button>
</form>
</div>
);
}
export default Login;

下面是我的UserContextManagement:

import React,{useState} from 'react'
export const UserContext = React.createContext();
//Customised Provider
export const UserContextProvider = ({children}) => {
const [usernm, setUsernm] = useState("invalid"); //Due to Usestate, value is resetted

return (
<UserContext.Provider value={{ usernm: usernm, setUsernm: setUsernm }}>
{children}
</UserContext.Provider>
)
}

问题:我能够通过在login.js文件中使用setUsernm来更新用户名，但由于login.js和dashboard.js都是使用相同的UserContextProvider在App.js中的路由。当从登录重定向到仪表板时，UserContextProvider再次执行，由于useState初始化，usernm被重置为默认状态，即无效。

如何定义useState，使用户名不重置为状态默认值?

Answer 1

我们还需要看到您的登录组件，因为它似乎按预期工作?

也许你的应用程序正在重新加载，所以上下文丢失了?

Codesandbox

要重定向，你应该使用react-router-dom函数。

你的登录应该像这样:

import { useHistory } from 'react-router-dom'
function Login() {
let history = useHistory()
let {setUsername} = useContext(UserContext)
function handleSubmit(e) {
e.preventDefault(); 
// Do the things you need
history.push('/dashboard')
}
return (
<div>
<form>
<input type="text" onChange={e => {setUsername(e.target.value)}}/>
<input type="password" onChange={e => setPwd(e.target.value)} /> // Use password type
<button type="submit" onClick={(e) => handleSubmit(e)>Sign In </button> // Probably gonna need to attach the function to onClick
</form>
</div>
);
}

React-Router文档