reactjs - ReactJs：没有索引的子键道具

问题描述

您好，我尝试在我的组件中使用索引作为键，但我最终从 eslint 和 reactjs 自己的文档中得到错误，他们建议在最后一个选项中使用索引研究我发现为每个组件生成一个 uuid，但这似乎代价高昂

这是我去 foreach 的数组：

export const Tags: ITag[] = [
  {
    Title: 'DashBoard',
    Name: 'Default',
    Link: '../dashboards',
    Icon: AiOutlineDashboard,
    DropdownItems: null,
  },
  {
    Name: 'Analytic',
    Link: '../dashboards',
    Icon: AiOutlineLineChart,
    DropdownItems: null,
  },
  {
    Name: 'Inventory',
    Link: '../dashboards',
    Icon: BiStoreAlt,
    DropdownItems: null,
  },
  {
    Title: 'Pages',
    Name: 'Employees',
    Link: '../dashboards',
    Icon: TiGroupOutline,
    DropdownItems: [
      {Name: 'Employee List', Link: '/eloBost'},
      {Name: 'View Employee', Link: '/duoBoost'},
      {Name: 'New Employee', Link: '/eloBost'},
      {Name: 'Any', Link: '/duoBoost'},
    ],
  },
  {
    Name: 'Departaments',
    Link: '../dashboards',
    Icon: FaRegBuilding,
    DropdownItems: [
      {Name: 'Elo Boost', Link: '/eloBost'},
      {Name: 'Duo Boost', Link: '/duoBoost'},
      {Name: 'MD10', Link: '/eloBost'},
      {Name: 'Coaching', Link: '/duoBoost'},
      {Name: 'Vitóriais', Link: '/duoBoost'},
    ],
  },
  {
    Name: 'Products',
    Link: '../dashboards',
    Icon: BsLightning,
    DropdownItems: [
      {Name: 'Elo Boost', Link: '/eloBost'},
      {Name: 'Duo Boost', Link: '/duoBoost'},
      {Name: 'MD10', Link: '/eloBost'},
      {Name: 'Coaching', Link: '/duoBoost'},
      {Name: 'Vitóriais', Link: '/duoBoost'},
    ],
  },
  {
    Name: 'Suppliers',
    Link: '../dashboards',
    Icon: BsBookmarkPlus,
    DropdownItems: [
      {Name: 'Elo Boost', Link: '/eloBost'},
      {Name: 'Duo Boost', Link: '/duoBoost'},
      {Name: 'MD10', Link: '/eloBost'},
      {Name: 'Coaching', Link: '/duoBoost'},
      {Name: 'Vitóriais', Link: '/duoBoost'},
    ],
  },
  {
    Name: 'Contracts',
    Link: '../dashboards',
    Icon: BsFileEarmarkText,
    DropdownItems: [
      {Name: 'Elo Boost', Link: '/eloBost'},
      {Name: 'Duo Boost', Link: '/duoBoost'},
      {Name: 'MD10', Link: '/eloBost'},
      {Name: 'Coaching', Link: '/duoBoost'},
      {Name: 'Vitóriais', Link: '/duoBoost'},
    ],
  },
  {
    Name: 'User List',
    Link: '../dashboards',
    Icon: RiGroupLine,
    DropdownItems: [
      {Name: 'Elo Boost', Link: '/eloBost'},
      {Name: 'Duo Boost', Link: '/duoBoost'},
      {Name: 'MD10', Link: '/eloBost'},
      {Name: 'Coaching', Link: '/duoBoost'},
      {Name: 'Vitóriais', Link: '/duoBoost'},
    ],
  },
];

在我的 jsx 上，我滚动列表并执行以下操作：

{tags.map((item) => (
        <>
          {item.Title ? (
            <TitleItem key={generateKey(item.Title.toString())} open={open}>
              {item.Title}
            </TitleItem>
          ) : (
            ""
          )}
          <TagList
            open={open}
            key={generateKey(item.Name.toString())}
            sideBarStatus={open}
            tag={item}
            clickHandler={clickHandler}
          />
        </>
      ))}

在我的 taglist 中，我必须通过数组中的一个数组：

  {isOpen === true ? (
    <OpenedStyled active={active}>
      {dropItems.map((item) => (
        <li className="li-open" key={generateKey(item.Name.toString())}>
          <a href="#/">{item.Name}</a>
        </li>
      ))}
    </OpenedStyled>
  ) : (
    <ClosedStyled>
      {dropItems.map((item) => (
        <li className="li-closed" key={generateKey(item.Name.toString())}>
          <FaGhost size={18} />
          <a href="#/">{item.Name}</a>
        </li>
      ))}
    </ClosedStyled>
  )}

我的生成键：

export const generateKey = (pre: any) => {
  return `${pre}_${new Date().getTime()}`;
};

ss:

带有控制台警告的代码沙盒： https ://codesandbox.io/s/recursing-bash-dn4l8?file=/src/App.tsx:5209-5772

标签： reactjs

reactjs - ReactJs：没有索引的子键道具

问题描述

解决方案

推荐阅读