Question

我正在制作一个Reactjs应用，并在其中一个组件中渲染类似的内容。我有点困惑，我应该把唯一密钥放在哪里。我一直在警告它，不知道为什么，因为在我看来我已经将钥匙放在正确的位置。

<Accordion allowZeroExpanded={true}>
  {sideDrawerList.map(item => (
    <AccordionItem key={item.key}>
      <AccordionItemHeading>
        <AccordionItemButton>
          <div>
            <p>{item.title}</p>
            <img src="some_url" alt="logo" />
          </div>
        </AccordionItemButton>
      </AccordionItemHeading>
      <AccordionItemPanel>
        <div>
          {item.childs.map(navItem => (
            <p key={navItem.linkPath}>
              <Link to={navItem.linkPath}>{navItem.linkText}</Link>
            </p>
          ))}
        </div>
      </AccordionItemPanel>
    </AccordionItem>
  ))}
</Accordion>

Answer 1

您的键位置是完美的，正如官方的React文档所建议的那样，必须将键添加到地图中的第一个元素中。

您的问题似乎是您正在使用的键：item.key或navItem.linkPath似乎具有重复的值。这就是在列表中显示警告的原因，所有键均应唯一。在cae中，您的数据集中没有唯一的内容，因此您可以考虑从map中添加索引作为键，但是通常不建议使用索引。样本：

list.map((currElement, index) => {
    <element key={index} />
});

这就是为什么不建议使用index作为键，这是来自react docs的原因：

如果您对呈现的项目没有稳定的ID，则可以使用   项目索引作为最后的关键：

如果项的顺序可能不建议使用索引作为键   更改。这会对性能产生负面影响，并可能导致问题   具有组件状态。查阅Robin Pokorny的文章，了解   关于使用索引作为索引的负面影响的深入解释   键。如果您选择不为列表项分配显式键，则   React将默认使用索引作为键。

React.js键中的混淆

1 个答案: