上下文 API 状态未更新

Question

Hey I have this function in 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)
        }
    }

Then in a differnet component im using it like so

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

When the loginUser function runs it updates the states but in the second component the failedLogin doesn't change

Im passing in all the states to contextData, the loginUser function user works as well but the failedlogin state doesnt get updated into the second component

The entire app is wrapped in the context api like so:

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

可能您的“第二个组件”没有包含在同一个 ContextProvider 中或不在该提供者之外。