React按钮点击无法执行退出登录功能问题求助

1. 检查自定义BasicButton组件的onClick传递 #

你使用了自定义BasicButton组件，需确认该组件是否正确接收并传递onClick属性：

// 错误示例：未绑定点击事件到原生按钮
const BasicButton = ({ children }) => {
  return <button>{children}</button>;
};

// 正确示例：将传入的onClick绑定到原生按钮
const BasicButton = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

如果组件内部未把onClick属性绑定到原生按钮上，点击事件无法触发传入的onLogout函数。

2. 确认AuthContext的value传递正确性 #

检查App.js中AuthContext.Provider的配置，确保onLogout已正确关联到你的logoutHandler函数：

// App.js中Provider的正确配置示例
<AuthContext.Provider 
  value={{
    isLoggedIn: isLoggedIn,
    onLogout: logoutHandler // 确保此处指向正确的退出处理函数
  }}
>
  {/* 应用组件内容 */}
</AuthContext.Provider>

同时确认logoutHandler逻辑完整，既要更新登录状态，也要清除本地存储：

const logoutHandler = () => {
  setIsLoggedIn(false);
  localStorage.removeItem('isLoggedIn'); // 或根据需求使用localStorage.clear()
};

3. 检查Header组件中useContext的使用 #

确保Header组件正确导入并使用AuthContext，解构出的onLogout无错误：

// Header.js示例代码
import { useContext } from 'react';
import { AuthContext } from './store/auth-context';
import BasicButton from './BasicButton';

const Header = () => {
  const { isLoggedIn, onLogout } = useContext(AuthContext);

  return (
    <header>
      {/* 其他导航元素 */}
      {isLoggedIn && <BasicButton onClick={onLogout}>退出登录</BasicButton>}
    </header>
  );
};

export default Header;

4. 排查事件阻止逻辑 #

如果BasicButton内部存在e.preventDefault()或e.stopPropagation()代码，可能会阻止onLogout触发，检查组件内是否有这类逻辑并按需移除。

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