RTK 查询 isSuccess on first api call 始终为 false
RTK query isSuccess on first api call is always false
所以我在 Blur 上进行了表单验证,我正在使用 RTK 查询来调用 api。我面临的问题是,在第一次 API 调用时 isSuccess
是 returning false 即使 API return 状态是 200
const [validateUser, { data, isSuccess }] = authAPI.useValidateUserMutation();
const validateUserDetails = (name, event) => {
event.preventDefault();
if (event.target.value !== "") {
let fieldData = {
fieldName: name,
value: event.target.value,
};
validateUser(fieldData);
console.log("Is Success: ", isSuccess);
if (isSuccess && data.errors.status !== 200) {
console.log(data);
}
} else {
}
};
第一次验证时
即使状态是 API 状态是 200 成功是 returned false 但现在如果我再做一次它将 return true
有办法解决吗?
这里你指的isSuccess
变量是你执行validateUser
之前关闭render创建的变量。因此,在未来的某个时候,整个组件将重新渲染并创建一个新的闭包。在那个新的闭包中,还会有一个 isSuccess
变量,那个新变量将是 true
。但是那个旧的 isSuccess
变量是“过去的快照”,一个永远不会改变的闭包中的值。
这是一个在 React 中会经常出现的概念,独立于 RTK 查询,所以你最好阅读 closures。
您在这里可以做的不是访问闭包变量,而是按照以下几行:
const validateUserDetails = async (name, event) => {
event.preventDefault();
if (event.target.value !== "") {
let fieldData = {
fieldName: name,
value: event.target.value,
};
try {
const data = await validateUser(fieldData).unwrap();
// do something with it
} catch (error) {
// do something with it
}
};
所以我在 Blur 上进行了表单验证,我正在使用 RTK 查询来调用 api。我面临的问题是,在第一次 API 调用时 isSuccess
是 returning false 即使 API return 状态是 200
const [validateUser, { data, isSuccess }] = authAPI.useValidateUserMutation();
const validateUserDetails = (name, event) => {
event.preventDefault();
if (event.target.value !== "") {
let fieldData = {
fieldName: name,
value: event.target.value,
};
validateUser(fieldData);
console.log("Is Success: ", isSuccess);
if (isSuccess && data.errors.status !== 200) {
console.log(data);
}
} else {
}
};
第一次验证时
即使状态是 API 状态是 200 成功是 returned false 但现在如果我再做一次它将 return true
这里你指的isSuccess
变量是你执行validateUser
之前关闭render创建的变量。因此,在未来的某个时候,整个组件将重新渲染并创建一个新的闭包。在那个新的闭包中,还会有一个 isSuccess
变量,那个新变量将是 true
。但是那个旧的 isSuccess
变量是“过去的快照”,一个永远不会改变的闭包中的值。
这是一个在 React 中会经常出现的概念,独立于 RTK 查询,所以你最好阅读 closures。
您在这里可以做的不是访问闭包变量,而是按照以下几行:
const validateUserDetails = async (name, event) => {
event.preventDefault();
if (event.target.value !== "") {
let fieldData = {
fieldName: name,
value: event.target.value,
};
try {
const data = await validateUser(fieldData).unwrap();
// do something with it
} catch (error) {
// do something with it
}
};