React中如何让Redux-Toolkit的loadMe dispatch仅执行一次？

问题场景 #

希望在About组件首次渲染时，通过useEffect执行一次loadMe的dispatch，但页面刷新时该dispatch执行了4次，需要实现仅执行一次的效果。

相关代码 #

About.tsx #

const About = () => {
    const dispatch = useAppDispatch();

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

    },[]);

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

export default About;

Action.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);
      }
    },
  );

解决方案 #

1. 排查React StrictMode的影响 #

开发环境下，React StrictMode会刻意重复执行副作用（比如useEffect回调）、组件挂载逻辑等，用来检测潜在的代码问题。这种重复执行是开发环境的特有行为，生产环境打包后会自动消失。

• 检查项目入口文件（如index.tsx），如果存在<React.StrictMode>包裹根组件，这就是开发环境下dispatch多次执行的原因。若想临时在开发环境避免该情况，可以移除StrictMode，但不推荐——它能帮你提前发现隐藏的副作用问题。

2. 确认组件是否被多次挂载 #

如果生产环境也存在多次执行的情况，需要排查组件是否被重复挂载：

• 在About组件的useEffect中添加挂载/卸载日志，确认组件生命周期：

  useEffect(() => {
    console.log('About组件挂载');
    dispatch(loadMe());
    return () => console.log('About组件卸载');
  }, [dispatch]);
  

• 若日志显示多次挂载/卸载，检查路由配置是否重复渲染About组件，或父组件的状态更新是否导致About反复卸载再挂载。

3. 规范useEffect的写法 #

你的useEffect写法本身没问题，但可以优化得更简洁，同时符合ESLint依赖规则：

const About = () => {
    const dispatch = useAppDispatch();

    useEffect(() => {
        dispatch(loadMe());
    }, [dispatch]); // Redux Toolkit的dispatch是稳定引用，加入依赖不会触发额外重渲染

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

export default About;

内容的提问来源于stack exchange，提问作者jack volten