我使用 redux 工具包，我的初始狀態是這樣的：
initialState: {
details: {
id: "",
base64: "",
},
},
每當用戶登錄時，我想在初始狀態中獲取影像 base64。我決定在我的 axios 中做這樣的事情：
axios.post(`${process.env.REACT_APP_API_URL_API_LOGIN}`, {
softWareOrUser: false,
userName: userName,
password: password,
})
.then((r) => {
if (r.data.resCode === 1) {
dispatch(setDetails({ ...details, id: r.data.Data.Id.toString() }));
ImageFetchingHandler(r.data);
}
})
.then((d) => {
navigate({ pathname: "/main" });
})
.catch(() => {
alert("user name or password is incorrect");
});
這就是我獲取影像 base64 的方式：
const { details } = useSelector((state) => state.axiosdetails);
const ImageFetchingHandler = ({ token }) => {
axios({
method: "post",
url: `${process.env.REACT_APP_API_URL_API_FETCH_IMAGE}`,
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
"DotNet-Timeout": 30000,
},
data: JSON.stringify({
id: details.id,
}),
})
.then((d) => {
Cookies.set("userImage", JSON.stringify(d.data), {
path: "/",
expires: 3,
sameSite: "strict",
secure: window.top.location.protocol === "https:",
});
});
};
我有一個問題，即使顯示實際的 id 值，也ImageFetchingHandler將值作為空字串發送。idredux developer tools
Redux 開發者工具截圖
問題是什么？
有什么辦法可以解決嗎？
uj5u.com熱心網友回復：
似乎該r.data物件已經具有您需要的所有詳細資訊，特別是它具有r.data.Data.Id您將id狀態設定為稍后立即嘗試在ImageFetchingHandler函式中訪問的屬性。
dispatch(setDetails({ ...details, id: r.data.Data.Id.toString() }));
ImageFetchingHandler(r.data); // <-- id is in the data
除了訪問data.tokeninImageFetchingHandler您還可以訪問data.Data.Id有效負載的 id 值。
const ImageFetchingHandler = ({ Data: { Id: id }, token }) => {
axios({
method: "post",
url: `${process.env.REACT_APP_API_URL_API_FETCH_IMAGE}`,
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
"DotNet-Timeout": 30000,
},
data: JSON.stringify({ id }),
})
.then((d) => {
Cookies.set("userImage", JSON.stringify(d.data), {
path: "/",
expires: 3,
sameSite: "strict",
secure: window.top.location.protocol === "https:",
});
});
};
uj5u.com熱心網友回復：
創建副作用details并檢查是否details.id存在。如果存在，則運行 fetch 函式。
useEffect(() => {
if(details.id) {
// call API here
}
}, [details])
一旦組件呈現詳細資訊欄位，該時間點就為空。異步details欄位獲取它的實際值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/529329.html
上一篇：如何使用視窗警報呈現組件