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 都是 App.js 中的路由相同 UserContextProvider。 UserContextProvider 在从登录重定向到仪表板时再次执行，并且由于 useState 初始化，usernm 重置为默认状态，即无效。

如何以不将用户名重置为状态默认值的方式定义 useState？

Answer 1

我们还需要查看您的登录组件，因为 it 似乎按预期工作？

也许您的应用正在重新加载，因此上下文丢失了？

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>
   );
}

Documentation in React-Router

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

Reactjs: Issue while updating context API shared by multiple components

reactjs

react-component

react-context

react-hooks

use-state