React useContext rerender компонент

Question

Я пытаюсь использовать ловушку useContext вместо Redux в своем приложении. И компонент заголовка, и страница входа используют один и тот же контекст. Оба являются дочерними элементами компонента маршрутизации, который использует поставщик контекста. В форме регистрации я использую жестко закодированные данные для проверки работоспособности. Заголовок не перерисовывается после регистрации.

Приложение js (компонент входа)

import React, { useContext, useState } from "react";
import { ExamContext } from "./Context/ExamContext";

function App() {
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");

  const { role, login } = useContext(ExamContext);

  const handleSubmit = () => {
    login(user, "Admin");
  };

  return (
    <React.Fragment>
      <div className="appbg">
        <div className="container">
          <div className="panel panel-success" style={{ marginTop: 20 }}>
            <div className="panel-heading">Login Forms</div>
            <div className="panel-body">
              <div className="form-group">
                <label>Email</label>
                <input
                  type="text"
                  className="form-control"
                  value={user}
                  onChange={e => setUser(e.target.value)}
                />
              </div>
            </div>
            <div className="panel-body">
              <div className="form-group">
                <label>Password</label>
                <input
                  type="password"
                  className="form-control"
                  value={pass}
                  onChange={e => setPass(e.target.value)}
                />
              </div>
            </div>
            <button className="btn btn-success" onClick={handleSubmit}>
              Submit
            </button>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

export default App;

Компонент заголовка

const Header = () => {
  const { role } = useContext(ExamContext);

  const [user] = useState(role);

  switch (user) {
    case "Admin":
      return (
        <div>
          <h4>Admin</h4>
        </div>
      );
    case "User":
      return (
        <div>
          <h4>User</h4>
        </div>
      );
    default:
      return (
        <div>
          <h4>No User</h4>
        </div>
      );
  }
};
export default Header;

и контекст

import React, { createContext, useState } from "react";

const ExamContext = createContext();

const ExamConProvider = ({ children }) => {
  const [user, setUser] = useState("");
  const [role, setRole] = useState("NoUser");

  const login = (getuser, getrole) => {
    setRole(getrole);
    setUser(getuser);
  };

  return (
    <ExamContext.Provider value={{ user, role, login }}>
      {children}
    </ExamContext.Provider>
  );
};

export { ExamContext, ExamConProvider }; 

Индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import Routing from './components/Routing';
import { ExamConProvider } from './Context/ExamContext'
import './scss/style.scss';


ReactDOM.render(
    <ExamConProvider>
        <Routing />
    </ExamConProvider>
    ,document.getElementById("root"))

Модуль маршрутизации

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import App from '../App';
import Home from '../containers/Home';
import Header from '../components/Header';
import Footer from '../components/Footer';

const Routing = () => {
    return(
        <BrowserRouter>
        <Header />
            <Route exact path="/" component={App}></Route>
            <Route path="/home" component={Home}></Route>
        <Footer />
        </BrowserRouter>
    )
}

export default Routing;

Answer 1

Не уверен, спрашиваете ли вы, почему заголовок не перерисовывается. Если да, то причина в том, что вы не добавили Context Provider в <App />.

Вы должны добавить его, как показано ниже:

import React, { useContext, useState } from 'react';
import { ExamConProvider, ExamContext } from './Context/ExamContext';
// Remember to import ExamConProvider at above line

function App() {

    // ... blah blah blah

    return(
        <ExamConProvider> {/* <--- Add this */}
            <React.Fragment>
                {/* Blah blah blah */}
            </React.Fragment>
        </ExamConProvider> {/* <--- Add this */}
    );
}

export default App;

Ура!