Блог

В моем приложении 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>
    )
}
 

Проблема: я могу обновить имя пользователя, используя setUsernm в login.js файл, но поскольку оба login.js и dashboard.js является ли маршрут в App.js используя то же UserContextProvider самое . UserContextProvider выполняется снова при перенаправлении с входа на панель мониторинга и из-за useState инициализации usernm сбрасывается в состояние по умолчанию, т. Е. Недопустимо.

Как определить useState таким образом, чтобы имя пользователя не сбрасывалось до значения по умолчанию?

Нам также нужно будет просмотреть ваш компонент входа в систему, потому что, похоже, он работает так, как задумано?

Может быть, ваше приложение перезагружается, поэтому контекст теряется?

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