我正在使用 redux 工具包，并且正在使用 redux thunk 調度一個函式。在我調度這個特定函式之后，我只是強制重繪 頁面（以觸發 useEffects），而不是呼叫我想要手動重繪 的所有內容，因為這個函式會重置所有內容，并且重繪 整個頁面會更容易。我遇到的問題是，在火狐瀏覽器中，以下代碼只是重繪 頁面，但該功能永遠不會關閉：
const resetPortfolioFunc = (e) => {
dispatch(resetPortfolio());
window.location.reload(false);
};
我也試過
const resetPortfolioFunc = (e) => {
dispatch(resetPortfolio());
window.location = window.location;;
};
并且為了在勇敢、chrome 和 microsoft edge 中澄清上述代碼按預期完美運行，只是 Firefox 重繪 頁面而不調度函式和更改任何內容。
以防萬一它需要（我不認為它是）這里是實際的功能 resetPortfolio 和 slice
export const resetPortfolio = createAsyncThunk(
"/portfolio/resetPortfolio",
async (value, thunkAPI) => {
const token = thunkAPI.getState().auth.user.token;
const userID = thunkAPI.getState().auth.user._id;
const newObj = {
token: token,
userID: userID,
};
let url = `http://localhost:3001/api/portfolio/resetPortfolio`;
const response = await axios.post(url, newObj);
return response.data;
}
);
export const portfolioSlice = createSlice({
name: "portfolio",
initialState,
reducers: {
reset: (state) => initialState,
},
extraReducers(builder) {
builder
.addCase(resetPortfolio.pending, (state, action) => {
state.resetStatus = "loading";
})
.addCase(resetPortfolio.fulfilled, (state, action) => {
state.resetStatus = "success";
})
.addCase(resetPortfolio.rejected, (state, action) => {
state.resetStatus = "failed";
});
},
});
現在，由于我使用的是 redux，因此我確實有一個解決方法，即在 useEffect 下呼叫 window.location.reload(false) 是調度成功的狀態，例如：
const resetPortfolioFunc = (e) => {
dispatch(resetPortfolio());
};
useEffect(() => {
if (status == 'success') {
window.location.reload
}
}, [status])
現在這個解決方案實際上比原來的要慢一點，在它適用的所有瀏覽器中感覺都是即時的，所以如果有辦法讓原版在 Firefox 中作業，我想知道如果不是我至少會想知道為什么 Firefox 在其他瀏覽器不這樣做時會以這種方式運行。
uj5u.com熱心網友回復：
這與 Redux 無關——這是關于您啟動網路請求而不是等待它實際發生。
在執行任何其他操作之前等待 thunk（以及網路請求等）的發送。
const resetPortfolioFunc = async (e) => {
await dispatch(resetPortfolio());
window.location.reload(false);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/506924.html
標籤：javascript 反应 火狐 还原