反应。 函数不会从 API 首次运行中保存

Question

如果我错过了类似的问题，我很抱歉。 我的问题是，当我向 API 发送请求时，我会返回结果（状态 200）并且它确实将它保存在服务器响应中，但我无法将它保存在第一次运行的 authenticatedUser 中。 但是当我第二次运行它时，它确实保存在authenticatedUser

我基本上尝试了两种不同的方法，并且都给出了相同的结果。 （我需要调用该函数两次）

首先：（它更新 serverResponse 但出错并且不更新 AuthenticatedUser）

    const RequestLogin = async () => {
        try {
            setServerResponse(await BackendAPIService.RequestLogin(credentials.email, credentials.password))
            if (serverResponse.status === 200) {
                setAuthenticatedUser(serverResponse.data)
                history.goBack()
            }
        } catch (error) {
            setError(error?.response?.data?.detail == undefined ? error?.response?.data == undefined ? 'ServerError Plase wait or contanct support' : error?.response?.data : error?.response?.data?.detail)
        }
    }

第二种方式：（它更新 serverResponse 但不更新 AuthenticatedUser ）

    const handleSuccess = () => {
        setAuthenticatedUser(serverResponse.data)
        history.goBack()
    }

    const RequestLogin = async () => {
        try {
            const { data } = await BackendAPIService.RequestLogin(credentials.email, credentials.password)
            setServerResponse(data)
            serverResponse && handleSuccess()

        } catch (error) {
            setError(error?.response?.data?.detail == undefined ? error?.response?.data == undefined ? 'ServerError Plase wait or contanct support' : error?.response?.data : error?.response?.data?.detail)
        }
    }

这是完整的代码

import { useContext, useState } from 'react'
import { useHistory } from 'react-router-dom'
import BackendAPIService from '../../assets/api/service/BackendAPIService'
import { UserContext } from '../../assets/provider/UserProvider'
import RoutingPath from '../../routes/RoutingPath'
import LocalStorage from '../../assets/cache/LocalStorage'

export const SignIn = () => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [AuthenticatedUser, setAuthenticatedUser] = useContext(UserContext)
    const [credentials, setCredentials] = useState({ email: '', password: '', })
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [serverResponse, setServerResponse] = useState<any>()
    const [Error, setError] = useState<string>('')
    const [remberMe,setRemberMe] = useState<boolean>(false)


    const history = useHistory()

    const showError = () => { return Error == '' ? '' : <div className="ErrorText">{Error}<br /></div> }

    const RequestLogin = async () => {
        try {
            const response = await BackendAPIService.RequestLogin(credentials.email, credentials.password)
            setServerResponse(response)
            if (response.status === 200) {
                setAuthenticatedUser(response.data)
                if (remberMe) localStorage.setItem(LocalStorage.user, response.data.hashedID)
                history.goBack()
            }
        } catch (error) {
            setError(error?.response?.data?.detail == undefined ? error?.response?.data == undefined ? 'ServerError Plase wait or contanct support' : error?.response?.data : error?.response?.data?.detail)
        }
    }

    return (
        <div>
            <h1>Login</h1>
            <input type="email" value={credentials.email} placeholder="Enter your e-mail" onChange={
                (event) => setCredentials({ email: event.target.value, password: credentials.password })
            } />
            <br />
            <input type="password" value={credentials.password} placeholder="Enter your password" onChange={
                (event) => setCredentials({ email: credentials.email, password: event.target.value })
            } />
            <br />
            {showError()}
            <button onClick={() => RequestLogin()}>Login</button>
            Remember Me:<input className="rememberMe" type="checkbox" onChange={(event) => setRemberMe(event.target.checked)} />
            <br />
            <p className="ForgotPassword" onClick={() => { history.push(RoutingPath.forgotPassword) }}>Forgot Password?</p>
        </div>
    )
}

Answer 1

您尝试在设置 serverResponse 状态后立即 setAuthenticatedUser(serverResponse.data) （即在同一渲染中）。 使用您范围内的实际响应，而不是在设置状态后立即尝试访问状态。

const RequestLogin = async () => {
        try {
            const response = await BackendAPIService.RequestLogin(credentials.email, credentials.password);
            setServerResponse(response);
            if (response.status === 200) {
                setAuthenticatedUser(response.data)
                history.goBack()
            }
        } catch (error) {
            setError(error?.response?.data?.detail == undefined ? error?.response?.data == undefined ? 'ServerError Plase wait or contanct support' : error?.response?.data : error?.response?.data?.detail)
        }
    }