仅在组件尚未重新渲染时才渲染它答案

【问题标题】：Render a component only if it is not already redendered仅在组件尚未重新渲染时才渲染它
【发布时间】：2023-08-11 18:02:01
【问题描述】：

假设我有一个像这样的对象，用于在 React 中创建材质导航栏：

const menu = {
   DASHBOARD: [
      {
         name: ViewPage1
         type: VIEW
      },
      {
         name: ViewPage2
         type: VIEW
      },
      {
         name: RunPage1
         type: RUN
      },
      {
         name: RunPage2
         type: RUN
      },
   ],
}

我的目标是只渲染一次“类型”标签（查看或运行）。所以有这样的东西：

----VIEW
ViewPage1
ViewPage2
----RUN
RunPage1
RunPage2

我试过这样：

 {Object.keys(menu).map((key) => (
          <>
            <Button>
              {key}
            </Button>
            <Menu>
              <div>           
                {menu[key].map((menuItem) => (
                  <TypeLabelComponent label={menuItem.type} size="small" variant="outlined" />
                  <MenuItem>
                      {menuItem.name}
                  </MenuItem>
                ))}
              </div>
            </Menu>
          </>
        ))}

但很明显，它每次在地图中循环时都会渲染 TYPE 标签。所以我的结果如下：

----VIEW
ViewPage1
----VIEW
ViewPage2
----RUN
RunPage1
----RUN
RunPage2

如何处理此问题以仅在尚未呈现 TYPE 标签的情况下呈现它？

【问题讨论】：

按type 分组菜单对象。此外，您在映射项目中缺少 key 道具并为内部 .map() 内容包装 <></>。

标签： javascript arrays reactjs object ecmascript-6

【解决方案1】：

首先将仪表板聚合为对象键，因为类型和值是名称数组。

const menu = {
  DASHBOARD: [
    {
      name: "ViewPage1",
      type: "VIEW",
    },
    {
      name: "ViewPage2",
      type: "VIEW",
    },
    {
      name: "RunPage1",
      type: "RUN",
    },
    {
      name: "RunPage2",
      type: "RUN",
    },
  ],
};

const Component = () => {
  const data = menu.DASHBOARD.reduce((acc, curr) => {
    if (!acc[curr.type]) {
      acc[curr.type] = [];
    }
    acc[curr.type].push(curr.name);
    return acc;
  }, {});

  return (
    <div>
      {Object.entries(data).map(([type, names]) => {
        return (
          <div key={type}>
            <div>{`--------${type}`}</div>
            {names.map((name) => (
              <div key={name}>{name}</div>
            ))}
          </div>
        );
      })}
    </div>
  );
};

ReactDOM.render(<Component />, document.getElementById("app"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="app"></div>

【讨论】：