我在App.js組件中有一個 api 呼叫，我從這里獲取用戶名以在導航欄中顯示它。您可以看到導航欄組件將 name 屬性作為引數傳遞給它。這是我的App.js代碼的樣子
function App() {
const[name,setName] = useState(null);
useEffect(()=> {
(
async () => {
try{
const res = await fetch('https://localhost:44361/api/users/getuser', {
headers: {"Content-Type": 'application/json;charset=UTF-8'},
credentials: 'include',
});
const content = await res.json();
console.log(content);
setName(content[0].uFirstName); // has to be content[0]
}
catch(e){
console.log(e);
}
}
)();
},[name])
return (
<Router>
<div className="App">
<Navbar name = {name}/>
<Routes>
<Route exact path="/" element={ <Home />} />
<Route path="/registration" element = {<Registration/>} />
<Route path="/login" element = {<Login/>} />
</Routes>
</div>
</Router>
);
}
export default App;
現在我想從Login.js組件更新 name 屬性。Login.js看起來像這樣：
function Login() {
// const[name,setName] = useState(null);
const[UEmail,setEmail] = useState(null);
const[UPassword,setPassword] = useState(null);
const[navigate, setNavigate] = useState(false);
const submitHandler = async (e) =>
{
e.preventDefault(); // Prevent from being refreshed. Because User will not re-put every field if some field is wrong
try{
const res = await fetch('https://localhost:44361/api/users/login', {
method: 'POST',
headers: {"Content-Type": 'application/json;charset=UTF-8'},
credentials: 'include',
body : JSON.stringify({
UEmail,
UPassword
})
});
var content = await res.json();
if(res.status === 200)
{
setNavigate(true);
//DO something
}
else if(res.status === 400){
//DO something
}
}catch(err){
console.log(err);
}
}
if(navigate) // REDIRECT TO LOGIN PAGE AFTER BEING SUCCESSFULLY REGISTERED
{
return <Navigate to="/"/>
}
return (
<div className="fullContainer">
<div className="base-container">
<div className="reg">Login</div>
<div className="content">
<div className="form">
<div className="form-group">
<input name="Email" type="email" placeholder="Email" required
onChange={e => setEmail(e.target.value)}
/>
</div>
<div className="form-group">
<input name="Password" type="password" placeholder="Password" required
onChange={e => setPassword(e.target.value)}
/>
</div>
</div>
</div>
<div className="footer">
<button onClick={submitHandler} type="button" className="btn">Login</button>
</div>
<div className="toReg">
<p>Don't have an account?
<Link to="/registration">
<a> Register</a>
</Link>
</p>
</div>
</div>
</div>
)
}
export default Login
用戶在輸入所有憑據后單擊登錄按鈕后，如何更新 App.js 中的名稱。我想這樣做是因為，在狀態代碼為 200 時將用戶導航到主頁后，導航欄中的用戶名沒有更改。我需要再次重新加載才能在導航欄中看到正確的用戶名。
謝謝你。
uj5u.com熱心網友回復：
將回呼 setName 從 App 傳遞給 Login 組件。
更改功能：
function Login({setName}) {
并傳遞回呼：
<Login setName={setName} />
現在您可以在 Login 組件中呼叫 setName
uj5u.com熱心網友回復：
更簡單的方法是使用背景關系。創建一個檔案并在該檔案中添加您想要在專案中更改/使用的變數，然后將您的專案包裝在背景關系中，最后在檔案中呼叫該方法或變數，您不會將它與來自“react”的 useContext 一起使用。
你會在這里找到你需要的一切：https : //www.toptal.com/react/react-context-api
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/384287.html
標籤：javascript 反应 接口 反应导航 反应组件