const renderMenu = (選單, 鍵) =>; { if (!CheckPermission(menu.moduleKey, menu.permissionKey)) { 返回空值; } 返回 ( <工具提示標題={menu.name}placement=“right”key={key}> <導航連結 activeClassName={styles.active} 精確的 類別名稱={styles.item} 到={選單.路徑} > {menu.icon}; <span className={styles.itemText}> {選單.名稱}</span> </NavLink> </工具提示> ); }; 導出預設值({collapse,onCollapse,isAdmin})=> { const { 使用者 } = useSelector((狀態) => ({ 使用者:state.auth.user, })); 返回 ( <佈局.Sider 主題=“光” className = {classnames(styles.sider,折疊?styles.collapsed:"")} 可折疊的 折疊={折疊} onCollapse={onCollapse} 寬度={折疊? 64:264} onBreakpoint={() =>; {}} 斷點=“xl” 風格={{ 溢出:“自動”, 高度:“100vh”, 位置:“固定”, 左:0, 頂部:0, 頂部填充:“50px”, }} >; {用戶&&使用者唯讀 ?選單.map((選單, i) => { if (menu.name === "Харилцагч") { 返回渲染選單(選單,i); } 別的 { 返回 ( 菜單&& 菜單.children && // eslint-disable-next-line array-callback-return menu.children.map((子選單, j) => { if (submenu.name === "QR данс") { 返回 ( <div key={i} className={styles.parentnav}> {渲染選單(子選單,j)}; ); } }) ); } }) : 選單.map((選單, i) => { if (選單.路徑) { 返回渲染選單(選單,i); } 別的 { 返回 ( <div key={i} className={styles.parentnav}> {菜單.名稱? ({菜單.名稱}) : 無效的} {menu.children.map((子選單, j) => { if (!submenu.path) 回傳 null; 如果(是管理員){ 返回渲染選單(子選單,j); } 別的 { 返回空值; } })}
P粉8248896502023-08-15 09:10:52
"錯誤:渲染時使用的hooks數量多於上一次渲染時的數量",通常發生在您使用React hooks(例如useSelector)的方式違反了hooks規則時。規則規定,hooks必須始終在函數元件的頂層調用,而不是在循環、條件或巢狀函數中調用。在您的程式碼中,您似乎在循環和條件中使用了CheckPermission函數。
// Sidebar.js import React from "react"; import { useSelector } from "react-redux"; import { NavLink, Tooltip } from "your-react-ui-library"; // 导入您的UI库 const Sidebar = ({ collapse, onCollapse, isAdmin, menus }) => { const { user } = useSelector((state) => ({ user: state.auth.user, })); // 将权限检查逻辑直接移入Sidebar组件 const checkPermission = (module_key, permission_key) => { const rolePermissions = user?.role?.role_permissions ?? []; return !!rolePermissions.find( (p_list) => p_list.module?.key === module_key && p_list.permission?.key === permission_key ); }; const renderMenu = (menu, key) => { // 使用本地的checkPermission函数进行权限检查 if ( !checkPermission(menu.moduleKey, menu.permissionKey) || (!isAdmin && !menu.path) ) { return null; } return ( <Tooltip title={menu.name} placement="right" key={key}> <NavLink activeClassName={styles.active} exact className={styles.item} to={menu.path} > <span className={styles.iconBox}>{menu.icon}</span> <span className={styles.itemText}> {menu.name}</span> </NavLink> </Tooltip> ); }; return ( <Layout.Sider // ... 其他属性和样式 ... > <div className={styles.action}> {user && user.read_only ? menus.map((menu, i) => { if (menu.name === "Харилцагч") { return renderMenu(menu, i); } else { return ( menu && menu.children && // eslint-disable-next-line array-callback-return menu.children.map((submenu, j) => { if (submenu.name === "QR данс") { return ( <div key={i} className={styles.parentnav}> {renderMenu(submenu, j)} </div> ); } }) ); } }) : menus.map((menu, i) => { if (menu.path) { return renderMenu(menu, i); } else { return ( <div key={i} className={styles.parentnav}> {menu.name ? ( <div className={`${styles.navlabel} ${styles.partentText}`} > {menu.name} </div> ) : null} {menu.children.map((submenu, j) => { if (!submenu.path) return null; if (isAdmin) { return renderMenu(submenu, j); } else { return null; } })} </div> ); } })} </div> </Layout.Sider> ); }; export default Sidebar;