如何在 React 中只運行一次 redux -toolkit？

Question

我想在 About 組件中使用 useEffect 第一次渲染時執行一次名為 loadMe 的調度。

但是，當屏幕刷新時，dispatch 會執行 4 次。 像圖片一樣吹

我怎樣才能只運行一次？

這是我的代碼

關於.tsx

常量關於 = () => {

const dispatch = useAppDispatch();

useEffect( () => {
    const loadMy = async()=> {
    dispatch(loadMe());
    }
    loadMy();

},[]);

return (
    <>
    <div>About page</div>
    </>
);
};

export default About;

動作.tsx

export const loadMe = createAsyncThunk(
    '/loadMe',
    async ( data, {rejectWithValue}) => {
      try {
        const userId = await localStorage.getItem('UserId');
        return userId;  
      } catch (error: any) {
          console.error(error);
        return rejectWithValue(error.response.data);
      }
    },
  );

Answer 1

它被調用了 4 次，因為異步和 react 在后台工作的方式。

反應嚴格模式

react 在開發模式下的工作方式是默認以嚴格模式運行。 在嚴格模式下，所有組件都被渲染兩次，以幫助開發人員進行錯誤檢查。 因此，與異步配對，總共進行了 4 次調度

異步

使用異步函數，它們最初被調用並返回一個 promise ，它調度前 2 次導致渲染，當 promise 被解析時，另一個重新渲染發生，導致再次調度 2 次。