我正在嘗試為我創建一個清理函式useEffect并更新cancelRequest我的函式中的代碼正在使用的變數getAllTweets()。
let cancelRequest = false;
useEffect(() => {
if (!url) {
dispatch({ type: "IDLE" });
return;
}
getAllTweets();
return function cleanup() {
cancelRequest = true;
};
}, [state.page]);
...
function getAllTweets() {
axiosConfig
.get(`${url}?page=${state.page}`)
.then((response) => {
if (cancelRequest) {
dispatch({ type: "IDLE" });
return;
} else if (state.page !== -1) {
state.page === 1
? dispatch({ type: "LOADED", payload: response.data.data })
: dispatch({
type: "LOADED",
payload: [...state.tweets, ...response.data.data],
});
}
...
})
...
}
但我認為該變數沒有被更新，因為Can't perform a React state update on an unmounted component當我在獲取資料時嘗試退出時，我的應用程式仍然收到警告。
uj5u.com熱心網友回復：
useReducer執行與 - 它存盤狀態相同的角色，useState但據說對于處理復雜的狀態邏輯很有用。但是，如果您useReducer在組件中使用，并且該組件已卸載，則不應再次呼叫 dispatch，因為它僅對應于該組件中的狀態。即使只是做
dispatch({ type: "IDLE" });
將產生一個反應警告。
但還有另一個潛在問題。cancelRequest是一個組件范圍的變數，這意味著每次渲染都會對該變數進行單獨的系結 - 因此cancelRequest，如果之前渲染中還有異步操作，則僅在單個渲染中重新分配可能是不夠的。改用 ref，它在所有渲染中都是持久的。
const cancelReqestRef = useRef();
useEffect(() => {
if (!url) {
dispatch({ type: "IDLE" });
return;
}
getAllTweets();
return function cleanup() {
cancelReqestRef.current = true;
};
}, [state.page]);
...
function getAllTweets() {
axiosConfig
.get(`${url}?page=${state.page}`)
.then((response) => {
if (cancelReqestRef.current) {
// DO NOT update state here with dispatch, just return
return;
} else if (state.page !== -1) {
state.page === 1
? dispatch({ type: "LOADED", payload: response.data.data })
: dispatch({
type: "LOADED",
payload: [...state.tweets, ...response.data.data],
});
}
...
})
...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486284.html
標籤：javascript 反应 反应式 反应钩子 axios