React Native（MUI）按钮选中状态if条件失效问题求助

核心问题分析 #

1. 点击事件参数传递错误：当前handleCloseNavMenu接收的是点击事件对象，依赖page.target.innerText获取页面名称的方式不可靠——如果按钮内部有嵌套元素、文本带多余空格，都会导致获取的名称和原数组的page值不匹配，状态更新后无法正确触发样式切换。
2. 按钮文本存在多余空格：选中状态的Button里，{page}后多了一个空格，导致innerText获取的内容（如"Music "）和初始状态的"Music"不一致，第一次点击后状态被设置为带空格的值，后续点击才可能触发匹配。

修复步骤 #

1. 修改点击事件传参逻辑：直接将当前遍历的page值传递给处理函数，避免依赖DOM文本获取：

{pages.map((page) => (
  (selectedMenuItem === page) ?
    (<Button
      key={page}
      onClick={() => handleCloseNavMenu(page)} // 直接传递page值
      sx={{ my: 2, color: 'white', display: 'block' }}
      className="nav-btn-selected">
      {page}</Button>) // 移除多余空格
    :
    (<Button
      key={page}
      onClick={() => handleCloseNavMenu(page)} // 直接传递page值
      sx={{ my: 2, color: 'white', display: 'block' }}
    >
      {page}
    </Button>)
))}

2. 更新处理函数：直接使用传入的page值更新状态，无需再从事件对象提取：

const handleCloseNavMenu = (pageName) => {
  setAnchorElNav(null);
  setSelectedMenuItem(pageName);
  navigation.navigate(pageName);
};

代码优化（可选） #

合并重复的Button代码，通过条件判断className简化写法：

{pages.map((page) => (
  <Button
    key={page}
    onClick={() => handleCloseNavMenu(page)}
    sx={{ my: 2, color: 'white', display: 'block' }}
    className={selectedMenuItem === page ? "nav-btn-selected" : ""}
  >
    {page}
  </Button>
))}

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