React useContext rerender component

Question

我正在尝试在我的应用程序中使用 useContext hook 而不是 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;

干杯！

Answer 2

您应该尝试在登录组件上使用 setUser 和 setRole 状态，而不是使用上下文函数。

在登录组件中，尝试以下操作：

function App() {
// renamed the input state
const [userInput, setUserInput] = useState("");
const [passInput, setPassInput] = useState("");

const { role, setUser, setRole } = useContext(ExamContext);

const handleSubmit = () => {
// setting the context state on Login component
setUser(userInput);
setRole("Admin");
};