点击Navbar组件登出按钮触发dispatch时出现栈溢出错误求助

问题核心是名称冲突引发无限递归：你在Navbar组件中定义了本地函数logout，同时又导入了Redux的logout异步action，两者同名导致调用混乱。当你在本地logout函数里执行logout()时，实际调用的是函数自身而非Redux的action，于是陷入无限递归，最终触发栈溢出错误。

修复方案 #

有两种简单的解决方式：

方式一：重命名组件内的本地函数

将组件里的登出函数改为其他名称，比如handleLogout：

const handleLogout = () => {
  dispatch(logout());
  setUser(null);
};

之后按钮的点击事件绑定这个重命名后的函数即可。

方式二：重命名导入的Redux action

导入时给action添加别名，避免和本地函数冲突：

// 导入时使用别名
import { logout as logoutAction } from './authSlice';

// 组件内函数
const logout = () => {
  dispatch(logoutAction());
  setUser(null);
};

额外优化建议 #

建议把setUser(null)的逻辑迁移到Redux的slice中，通过监听logout.fulfilled状态统一更新user状态，这样组件无需手动调用setUser，保持状态管理的一致性：

// authSlice.js
const authSlice = createSlice({
  name: 'auth',
  initialState: { user: /* 你的初始用户状态 */ },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(logout.fulfilled, (state) => {
      state.user = null;
    });
  }
});

内容的提问来源于stack exchange，提问作者Sohaib Butt