为何React中useEffect()在我的代码内无法生效？

你的代码片段 #

const [open, setOpen] = useState(false);

useEffect(() => {
    if(!token){
        return <Navigate to="/auth/login"/>
    }
    getMe(token)
}, [token, getMe])

return (
    <RootStyle>
        <DashboardNavbar onOpenSidebar={() => setOpen(true)} />
        <DashboardSidebar isOpenSidebar={open} onCloseSidebar={() => setOpen(false)} />
        <MainStyle>
            <Outlet />
        </MainStyle>
    </RootStyle>
);

const mapStateToProps = ({ auth }) => ({
    token: auth.token ? auth.token.token : null
})

const mapDispatchToProps = (dispatch) => ({
    getMe: (token) => dispatch(fetchMe(token)),
})

问题原因 #

• useEffect回调返回JSX是错误用法
  useEffect的回调函数仅允许返回两种值：要么是用于清理操作的函数，要么不返回任何值。返回<Navigate>组件属于无效操作，会触发React内部错误处理，直接中断整个effect的执行，这就是你加console.log也没反应的核心原因。

• 路由跳转逻辑位置错误
  路由跳转属于组件的渲染逻辑，应该在组件的render阶段直接判断token状态，而不是等到useEffect（挂载后执行）才处理。放在useEffect里不仅无法触发跳转，还会导致组件先渲染一次无效内容，再尝试执行错误逻辑。

• getMe函数导致依赖不稳定
  mapDispatchToProps里的getMe是每次组件渲染时都会生成的新函数，因为每次调用mapDispatchToProps都会创建一个新的箭头函数。这会导致useEffect的依赖项getMe每次都变化，即使token没改，也会重复触发effect，进而引发重复渲染。

修复方案 #

方案1：修正路由跳转逻辑，调整effect用法 #

const [open, setOpen] = useState(false);
const navigate = useNavigate(); // 引入useNavigate钩子

// 优先在render阶段判断token，直接返回跳转组件
if (!token) {
    return <Navigate to="/auth/login" />;
}

useEffect(() => {
    // token存在时调用getMe
    getMe(token);
}, [token, getMe]);

return (
    <RootStyle>
        <DashboardNavbar onOpenSidebar={() => setOpen(true)} />
        <DashboardSidebar isOpenSidebar={open} onCloseSidebar={() => setOpen(false)} />
        <MainStyle>
            <Outlet />
        </MainStyle>
    </RootStyle>
);

方案2：稳定getMe函数的依赖 #

修改mapDispatchToProps，使用bindActionCreators确保getMe函数引用稳定：

import { bindActionCreators } from 'redux';

const mapDispatchToProps = (dispatch) => bindActionCreators({
    getMe: fetchMe // 直接传入action creator
}, dispatch);

这样getMe的引用不会随组件渲染变化，useEffect的依赖项能保持稳定，避免不必要的重复执行。

方案3：直接在effect中调用dispatch #

如果不想修改mapDispatchToProps，可以直接在effect中使用useDispatch钩子调用action：

const dispatch = useDispatch();

if (!token) {
    return <Navigate to="/auth/login" />;
}

useEffect(() => {
    dispatch(fetchMe(token));
}, [token, dispatch]); // dispatch是redux提供的稳定引用，无需担心依赖变化

内容的提问来源于stack exchange，提问作者Fun Strike