想象拥有这样自定义钩子:
import React from "react";
import axios from "axios";
export const useFetchListDetails = () => {
let token = JSON.parse(localStorage.getItem("AuthToken"));
const [listDetails, setListDetails] = React.useState();
const HandleFetchDetails = (idConfer) => {
axios({
method: "post",
url: `${process.env.REACT_APP_API_URL_API_LIST_SERVICECONFER}`,
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
data: JSON.stringify({
idConfer: parseInt(idConfer),
}),
})
.then((r) => {
setListDetails(r.data.Data.ListService);
})
.catch(() => alert("خطا در شبکه"));
};
return { HandleFetchDetails, listDetails };
};
listDetails
是一个包含对象数组,我使用它来Map和返回每个对象的元素。
我有一个按钮,当我点击这个按钮时,它会删除选中的detail
。在这之后,我像这样回忆我的钩子:
<button
onClick={() => {
fetchDelete()
HandleFetchDetails(factor.ID)
}}
>Click</button>
现在我应该有一个新的数组,这意味着我应该有一个更新的UI,但它没有。当我console.log
r.data.Data.ListService
在then
中。它显示我一个更新的数组,但由于某种原因,我的listDetails
保持不变。
useState是异步的。我仍然不知道为什么会发生这种情况。
fetch delete本身也是一个内置Axios的自定义钩子。所以我也尝试将该函数放入其中。如下所示:
.then((r) => {
if (r.data.resCode === 1) {
HandleFetchListServiceConfer(
ErjaView.ErjaInfo.ID,
ErjaView.ErjaInfo.IdPatient
);
HandleFetchDetails(idConfer);
}
}
型
也没成功。
1条答案
按热度按时间mv1qrgav1#
如果我没有理解错的话,
fetchDelete
方法应该接收一个回调,只有在收到删除响应之后才应该调用该回调:在你的删除钩子中
这将确保在状态更新之间不会出现任何争用情况。