Selesaikan Lebih Banyak Masalah Cangkuk: Panduan Mudah

Question

Saya menghadapi beberapa masalah dengan cangkuk dalam projek saya. Ini ialah fungsi yang menyemak kebenaran pengguna dan mengembalikan benar atau salah.

import { useSelector } daripada "react-redux";

const CheckPermission = (kunci_modul, kunci_keizinan) => {
  const { pengguna } = useSelector((negeri) => ({
    pengguna: state.auth.user,
  }));

  const rolePermissions = pengguna?.role?.role_permissions ?? [];

  const return_value = !!rolePermissions.find(
    (p_senarai) =>
      p_list.module?.key === module_key &&
      p_list.permission?.key === permission_key
  );

  pulangkan nilai_pulangan;
};

eksport lalai CheckPermission;

然后我在我的侧边栏组件中使用它

const renderMenu = (menu, kunci) => {
  jika (!CheckPermission(menu.moduleKey, menu.permissionKey)) {
    kembali null;
  }

  kembali (
    <Tooltip title={menu.name} placement="right" key={key}>
      <NavLink
        activeClassName={styles.active}
        tepat
        className={styles.item}
        to={menu.path}
      >
        <span className={styles.iconBox}>{menu.icon}</span>
        <span className={styles.itemText}> {menu.name}</span>
      </NavLink>
    </Petua alat>
  );
};

eksport lalai ({ collapse, onCollapse, isAdmin }) => {
  const { pengguna } = useSelector((negeri) => ({
    pengguna: state.auth.user,
  }));

  kembali (
    <Layout.Sider
      tema = "cahaya"
      className={classnames(styles.sider, collapse ? styles.collapsed : "")}
      boleh dilipat
      runtuh={runtuh}
      onCollapse={onCollapse}
      lebar={collapse ? 64 : 264}
      onBreakpoint={() => {}}
      titik putus = "xl"
      gaya={{
        limpahan: "auto",
        ketinggian: "100vh",
        kedudukan: "tetap",
        kiri: 0,
        atas: 0,
        paddingTop: "50px",
      }}
    >
      <div className={styles.action}>
        {pengguna && pengguna.baca_sahaja
          ? menus.map((menu, i) => {
              if (menu.name === "Харилцагч") {
                return renderMenu(menu, i);
              } lain {
                kembali (
                  menu &&
                  menu.kanak-kanak &&
                  // eslint-disable-next-line array-callback-return
                  menu.children.map((submenu, j) => {
                    if (submenu.name === "QR данс") {
                      kembali (
                        <div key={i} className={styles.parentnav}>
                          {renderMenu(submenu, j)}
                        </div>
                      );
                    }
                  })
                );
              }
            })
          : menus.map((menu, i) => {
              jika (menu.path) {
                return renderMenu(menu, i);
              } lain {
                kembali (
                  <div key={i} className={styles.parentnav}>
                    {menu.name ? (
                      <div
                        className={`${styles.navlabel} ${styles.partentText}`}
                      >
                        {menu.name}
                      </div>
                    ): null}
                    {menu.children.map((submenu, j) => {
                      jika (!submenu.path) mengembalikan null;

                      if (isAdmin) {
                        return renderMenu(submenu, j);
                      } lain {
                        kembali null;
                      }
                    })}
                  </div>
                );
              }
            })}
      </div>
    </Layout.Sider>
  );
};

但是它抛出了"Ralat: Diberikan lebih banyak cangkuk berbanding semasa pemaparan sebelumnya."，我该如何在其他地方正确使用我的checkPermission函数。

我尝试在循环中使用checkPermission函数，结果是一样的。

Answer 1

"Ralat: Rendering dengan lebih banyak cangkuk daripada paparan terakhir" biasanya berlaku apabila anda menggunakan cangkuk React (seperti useSelector) dengan cara yang melanggar peraturan cangkuk. Peraturan menyatakan bahawa cangkuk mesti sentiasa dipanggil pada tahap teratas komponen berfungsi, dan bukan dalam gelung, bersyarat atau fungsi bersarang. Dalam kod anda, anda nampaknya menggunakan fungsi CheckPermission dalam gelung dan bersyarat.

// 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;