上下文Api状态未更新

Question

我在AuthContext.js中有这个函数

let [authTokens, setAuthTokens] = useState(null)
let [user, setUser] = useState(false)
let [failedlogin, setFailedlogin] = useState(false)
let loginUser = async (e) => {
e.preventDefault();
let response = await fetch(URL, {
method:'POST',
headers:{
'Content-Type': 'application/json'
},
body:JSON.stringify({'email':e.target.email.value, 'password':e.target.password.value})
})
let data = await response.json()
if(response.ok) {
setAuthTokens(data)
localStorage.setItem('authTokens', JSON.stringify(data))
setUser(true)
router.push('/dashboard')
} else {
setFailedlogin(true)
}
}

然后在另一个组件中我像这样使用

import { StyledLogin } from "./Styles/Login.Styles.Js"
import Link from 'next/link'
import React, {useContext, useState, useEffect} from 'react'
import AuthContext from '../context/AuthContext'
const LoginComponent = () => {
let { loginUser, failedlogin } = useContext(AuthContext);

return (
<StyledLogin>
<div className="container">
<div className="form-container">
<form onSubmit={loginUser}>
{failedlogin && <h1>Email or Password is incorrect</h1>}
<div className="input-container">
<input type="email" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
</div>
<div className="login-button">
<button>Sign In</button>
</div>
</form>
<div className="create-account">
<Link href="/signup">
<button>Create Account</button>
</Link>
</div>
<Link href="/forgot-password">
<p className="forgot">Forgot your password?</p>
</Link>
</div>
</div>
</StyledLogin>
);
}
export default LoginComponent

loginUser函数运行时，它更新状态，但在第二个组件failedLogin不改变

我将所有状态传递给contextData, loginUser函数user也可以工作，但failedlogin状态不会更新到第二个组件

整个应用程序被包装在上下文api中，如下所示:

import '../styles/globals.css'
import Layout from '../components/Layout'
import { AuthProvider } from '../context/AuthContext'
function MyApp({ Component, pageProps }) {
return (
<AuthProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</AuthProvider>
)
}
export default MyApp

Answer 1

可能是你的"第二组件";没有被包装在同一个上下文提供程序中，或者在该提供程序之外。