将useState替换为Redux useSelector后失效，MUI Tabs报错求助

问题根源 #

报错核心原因是Redux store中dashboard状态的初始值为-1，而你的MUI Tabs组件仅提供了值为0、1、2的选项，两者不匹配导致校验失败。用useState时你应该设置了合法初始值（比如0），所以运行正常，转Redux后忽略了初始状态的正确性。

解决方案 #

1. 修正Redux初始状态

找到你的Redux reducer或slice定义，将dashboard的初始值改为合法选项值（比如0，对应第一个标签）：

// 示例：Redux reducer/slice的初始状态
const initialState = {
  dashboard: 0, // 将原有的-1替换为0（或1/2，按需设置默认选中项）
  // 其他状态字段...
};

2. 可选：添加状态合法性兜底（防止异常值）

如果担心状态被意外设置为非法值，可以在组件中对selected做校验处理：

function SideBar() {
  const selected = useSelector((state) => state.dashboard);
  const dispatch = useDispatch();
  // 确保选中索引在合法范围内，超出则默认设为0
  const validSelected = [0,1,2].includes(selected) ? selected : 0;

  return (
    <div className="Sidebar">
      {/* logo区域保持不变 */}
      <div className="logo">
        <img src={Logo} alt="logo" />
        <span>Company Name</span>
      </div>
      {/* 菜单区域使用校验后的合法值判断选中状态 */}
      <div className="menu">
        {SidebarData.map((item, index) => (
          /* eslint-disable */
          <div
            role='menu'
            className={validSelected === index ? 'menuItem active' : 'menuItem'}
            key={index}
            onClick={() => dispatch(setDashboard(index))}
            onKeyDown={() => dispatch(setDashboard(index))}
          >
            <item.icon />
            <span>{item.heading}</span>
          </div>
        ))}
        <div className='menuItem'>
          <UilSignOutAlt />
        </div>
      </div>
    </div>
  );
}

额外提示 #

• 确保Tabs组件绑定的value同样取自Redux的dashboard状态，和侧边栏的选中状态保持同步。
• 若后续SidebarData的选项数量变化，记得同步更新合法索引的范围（比如新增选项后，把[0,1,2]改成对应的索引数组）。

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