地图功能问题中的ReactJS唯一键[重复]答案

【问题标题】：ReactJS unique key in map function problem [duplicate]地图功能问题中的ReactJS唯一键[重复]
【发布时间】：2021-09-15 08:54:18
【问题描述】：

我正在 React 上构建一个钢琴应用程序。我创建了一个数组来存储这样的笔记：

const notes = ["C", "D", "E", "F", "G", "A", "B"];

然后我像这样映射它：

<ul>
    {notes.map((note) => {
      if (note === "C") {
        return (
          <>
            <li key={note}>{note}</li>
            <li key={`${note}#`}>{note}#</li>
          </>
        );
      }
      return (
        <li key={note}>{note}</li>
      );
    })}
  </ul>

但是ReactJS 总是弹出关于列表项中唯一键的警告。我相信问题是这样的：

<li key={`${note.id}#`}>{note.note}#</li>

但我不太明白为什么（试图在控制台中记录关键部分，它们对我来说都是独一无二的）。谁能为我解释一下？提前致谢。

【问题讨论】：

我相信我会向它添加密钥 <li key={${note}#}> 。这是错误的做法吗？
我完全误读了这个，我不知道我在想什么。

标签： javascript reactjs

【解决方案1】：

您需要为父标签添加键。所以它应该是这样的：

<ul>
{notes.map((note) => {
  if (note === "C") {
    return (
      <React.Fragment key={note} >
        <li>{note}</li>
        <li}>{note}#</li>
      </React.Fragment>
    );
  }
  return (
    <li key={note}>{note}</li>
  );
})}

【讨论】：