さらなるフック問題の解決: 簡単なガイド
<p>プロジェクトのフックに関していくつかの問題が発生しています。これはユーザーの権限をチェックし、true または false を返す関数です。</p>
<pre class="brush:php;toolbar:false;">import { useSelector } from "react-redux";
const CheckPermission = (モジュールキー, パーミッションキー) => {
const { ユーザー } = useSelector((state) => ({
ユーザー: state.auth.user、
}));
const rolePermissions = user?.role?.role_permissions ?? [];
const return_value = !!rolePermissions.find(
(p_list) =>
p_list.module?.key === module_key &&
p_list.permission?.key === 許可キー
);
戻り値を返します;
};
デフォルトの CheckPermission;</pre> をエクスポートします。
<p>その後私在我的側边栏構成要素中使用它</p>
<pre class="brush:php;toolbar:false;">const renderMenu = (メニュー, キー) => {
if (!CheckPermission(menu.moduleKey, menu.permissionKey)) {
null を返します。
}
戻る （
<ツールチップ title={menu.name} location="right" key={key}>
<ナビリンク
activeClassName={styles.active}
ちょうど
className={styles.item}
to={メニュー.パス}
>
<span className={styles.iconBox}>{menu.icon}</span>
<スパンクラス名={styles.itemText}> {menu.name}</span>
</NavLink>
</ツールチップ>
);
};
デフォルトをエクスポート ({ 崩壊, onCollapse, isAdmin }) => {
const { ユーザー } = useSelector((state) => ({
ユーザー: state.auth.user、
}));
戻る （
<Layout.Sider
テーマ＝「光」
className={classnames(styles.sider, 崩壊 ?styles.collapsed : "")}
折りたたみ式
折りたたまれた={折りたたむ}
onCollapse={onCollapse}
width={折りたたむ ? 64：264｝
onBreakpoint={() => {}}
ブレークポイント = "xl"
スタイル={{
オーバーフロー: "自動"、
高さ: "100vh"、
位置: 「固定」、
左: 0、
上: 0、
パディングトップ: "50px",
}}
>
<div className={styles.action}>
{ユーザー&&ユーザー.読み取り専用
?メニュー.マップ((メニュー, i) => {
if (menu.name === "Харилцагч") {
return renderMenu(menu, i);
} それ以外 {
戻る （
メニュー&&;
menu.children &&
// eslint-disable-next-line array-callback-return
menu.children.map((submenu, j) => {
if (submenu.name === "QR 日") {
戻る （
<div key={i} className={styles.parentnav}>
{renderMenu(サブメニュー, j)}
</div>
);
}
})
);
}
})
: メニュー.マップ((メニュー, i) => {
if (メニュー.パス) {
return renderMenu(menu, i);
} それ以外 {
戻る （
<div key={i} className={styles.parentnav}>
{メニュー.名前 ? (
{メニュー.名前}
</div>
） ： ヌル}
{menu.children.map((submenu, j) => {
if (!submenu.path) が null を返す。
if (isAdmin) {
return renderMenu(submenu, j);
} それ以外 {
null を返します。
}
})}
</div>
);
}
})}
</div>
</Layout.Sider>
);
};</pre>
<p>しかし、「エラー: 前回のレンダリング時よりも多くのフックがレンダリングされました。」というメッセージが表示されます。これは、他の場所でどのように私たちの checkPermission 関数を使用しているのかです。</p>
<p>私たちはサイクル中に checkPermission 関数を使用してみましたが、結果は次のとおりです。
全員に返信(1)返信します
P粉8248896502023-08-15 09:10:52
「エラー: 前回のレンダリングよりも多くのフックを使用してレンダリングしています」は通常、フック ルールに違反する方法で React フック (useSelector など) を使用した場合に発生します。ルールでは、フックはループ、条件、またはネストされた関数内ではなく、常に機能コンポーネントの最上位レベルで呼び出される必要があると規定されています。コードでは、ループと条件で CheckPermission 関数を使用しているようです。
リーリー
返事
0
