Reactjs React会不断抛出索引错误，即使我已经定义了索引

我正在用map（）构建一些JSX，并且非常了解如何在列表项上设置键。但是，React会不断抛出此错误：

index.js:2177 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `DocsNavbar`. See https://reactjs.org/docs/lists-and-keys.html#keys for more information.
    in Fragment (created by DocsNavbar)
    in DocsNavbar (at layoutDocs.js:32)
    in LayoutHome (at docs.js:26)
    in DocsPage (created by HotExportedDocsPage)
    in AppContainer (created by HotExportedDocsPage)
    in HotExportedDocsPage (created by PageRenderer)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:56)
    in RouteHandler (at root.js:78)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:69)
    in RouteUpdates (at root.js:68)
    in EnsureResources (at root.js:66)
    in LocationHandler (at root.js:124)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:123)
    in Root (at root.js:132)
    in StaticQueryStore (at root.js:138)
    in _default (at app.js:67)

这是堆栈跟踪所指的

DocsNavbar

组件。问题特别在于

标记，因为如果我取出它，错误就会消失

  return (
    <>
      <MenuMobile menuItems={menuItems} open={open} setOpen={setOpen} />
      <Navbar bg="white" variant="light" expand="lg" fixed="left">
        <Navbar.Brand href="/home">
          <img src={logo} width="113" height="40" alt={siteTitle + " Logo"} />
        </Navbar.Brand>
        <NavbarToggler open={open} setOpen={setOpen} />

        <Accordion activeKey={active} className="sidebar-menu" onSelect={(e) => setActive(e)}>
          {menu.groups.map((group, i) => {
            return (
              <>
                <h2 className="group-title" key={group.title.toLowerCase()} data-key={group.title.toLowerCase()}>
                  {group.title}
                </h2>
              </>
            );
          })}
        </Accordion>
      </Navbar>
    </>
  );

返回(
setActive（e）}>
{menu.groups.map（（组，i）=>{
返回(
{group.title}
);
})}
);

我将键值作为数据属性输出以进行双重检查，您可以从渲染输出中看到，每个键都是唯一的：

<div class="sidebar-menu accordion">
  <h2 class="group-title" data-key="general">General</h2>
  <h2 class="group-title" data-key="solutions">Solutions</h2>
</div>

一般的
解决

问题：您已将密钥放置在每个子代的后代上

解决方案：React键需要位于映射的最外层元素上，在本例中为片段。您需要实际指定

片段

标记，因为属性不能与速记符号一起使用

{menu.groups.map(group => {
  return (
    <Fragment key={group.title.toLowerCase()} >
      <h2 className="group-title" data-key={group.title.toLowerCase()}>
        {group.title}
      </h2>
    </Fragment>
  );
})}

{menu.groups.map（group=>{
返回(
{group.title}
);
})}

问题：您已将密钥放置在每个子代的后代上

解决方案：React键需要位于映射的最外层元素上，在本例中为片段。您需要实际指定

片段

标记，因为属性不能与速记符号一起使用

{menu.groups.map(group => {
  return (
    <Fragment key={group.title.toLowerCase()} >
      <h2 className="group-title" data-key={group.title.toLowerCase()}>
        {group.title}
      </h2>
    </Fragment>
  );
})}

{menu.groups.map（group=>{
返回(
{group.title}
);
})}

使用：

返回(
{group.title}
);

使用：

返回(
{group.title}
);

ugh，所以我必须将片段转换为元素？我试图不添加更多的markup.ugh，所以我必须将片段转换为元素？我尽量不添加更多的标记。