Résoudre davantage de problèmes de crochet : un guide simple
P粉883278265
2023-08-14 13:19:01
<p>Je rencontre des problèmes avec les hooks dans mon projet. Il s'agit d'une fonction qui vérifie les autorisations des utilisateurs et renvoie vrai ou faux.</p>
<pre class="brush:php;toolbar:false;">import { useSelector } depuis "react-redux" ;
const CheckPermission = (module_key, permission_key) => {
const { utilisateur } = useSelector((state) => ({
utilisateur : state.auth.user,
}));
const rolePermissions = utilisateur?.role?.role_permissions ?? [] ;
const return_value = !!rolePermissions.find(
(p_list) =>
p_list.module?.key === module_key &&
p_list.permission?.key === permission_key
);
retourner return_value ;
} ;
exporter CheckPermission par défaut;</pre>
<p>我在我的侧边栏组件中使用它</p>
<pre class="brush:php;toolbar:false;">const renderMenu = (menu, touche) => {
if (!CheckPermission(menu.moduleKey, menu.permissionKey)) {
renvoie null ;
}
retour (
<Tooltip title={menu.name} placement="right" key={key}>
<NavLink
activeClassName={styles.active}
exact
className={styles.item}
à={menu.chemin}
>
<span className={styles.iconBox}>{menu.icon}</span>
<span className={styles.itemText}> {menu.name}</span>
</NavLink>
</Info-bulle>
);
} ;
export par défaut ({effondrement, onCollapse, isAdmin }) => {
const { utilisateur } = useSelector((state) => ({
utilisateur : state.auth.user,
}));
retour (
<Layout.Sider
thème = "lumière"
className={classnames(styles.sider, cliff ? styles.collapsed : "")}
pliant
effondré={collapse}
onCollapse={onCollapse}
width={collapse ? 64 : 264}
onBreakpoint={() => {}}
point d'arrêt="xl"
style={{
débordement : "auto",
hauteur : "100vh",
position : "fixe",
gauche : 0,
haut : 0,
paddingTop : "50px",
}}
>
<div className={styles.action}>
{utilisateur && utilisateur.read_only
? menus.map((menu, i) => {
if (menu.name === "Харилцагч") {
return renderMenu(menu, je);
} autre {
retour (
menu &&
menu.enfants &&
// eslint-disable-tableau-rappel-retour de la ligne suivante
menu.children.map((sous-menu, j) => {
if (submenu.name === "QR dans") {
retour (
<div key={i} className={styles.parentnav}>
{renderMenu(sous-menu, j)}
</div>
);
}
})
);
}
})
: menus.map((menu, i) => {
si (menu.chemin) {
return renderMenu(menu, je);
} autre {
retour (
<div key={i} className={styles.parentnav}>
{menu.nom ? (
<div
className={`${styles.navlabel} ${styles.partentText}`}
>
{menu.nom}
</div>
) : nul}
{menu.children.map((sous-menu, j) => {
if (!submenu.path) renvoie null ;
si (estAdmin) {
return renderMenu (sous-menu, j);
} autre {
renvoie null ;
}
})}
</div>
);
}
})}
</div>
</Layout.Sider>
);
};</pré>
<p>但是它抛出了"Erreur : rendu plus de crochets que lors du rendu précédent."
<p>
"Erreur : rendu avec plus de hooks que le dernier rendu" se produit généralement lorsque vous utilisez des hooks React (tels que useSelector) d'une manière qui enfreint les règles des hooks. Les règles stipulent que les hooks doivent toujours être appelés au niveau supérieur d'un composant fonctionnel, et non dans des boucles, des conditions ou des fonctions imbriquées. Dans votre code, vous semblez utiliser la fonction CheckPermission en boucle et conditionnellement.