javascript - 做出反应。函数不会从 API 首次运行中保存
问题描述
如果我错过了类似的问题,我很抱歉。我的问题是,当我向 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>
)
}
解决方案
您正在尝试在设置 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)
}
}
推荐阅读
- java - 如何通过单击添加的删除图标在 TabLayout.Tab 上添加删除图标以删除选项卡
- google-apps-script - Google Calendar API - 如何获取日历的共享链接,特别是私人 ical url?
- angular - 使用 HttpClient 在 Http 请求中类型断言
- amazon-web-services - 访问多个亚马逊卖家账户并从亚马逊广告 API 收集他们的数据
- python - Opencv 未安装在 Raspbian Stretch 中
- r - 我可以使用 print() 来获取结果,但存储结果会给我 null
- spring-boot - Spring Boot 后重定向返回 302 状态
- python - Pandas.to_datetime() 仅在数据框中的列上失败
- javascript - 为 Text-To-Speech 和 Streamlabs 调整 javascript 代码
- xml - 将 SOAP 请求发布到 MS Dynamics NAV WS