列表中的每个孩子都应该有一个唯一的“关键”道具控制台警告[重复]答案

【问题标题】：Each child in a list should have a unique "key" prop console warning [duplicate]列表中的每个孩子都应该有一个唯一的“关键”道具控制台警告[重复]
【发布时间】：2020-09-08 04:37:19
【问题描述】：

代码在这里

   <React.Fragment>
    <div className="js-container">
      <div className="js-sidecontent">
        {[{ title: "Js, values: ["s1", "s2"]}].map((f_list) => (
          <div className="js-sidecontent-container" key={f_list.title}>
            <button className="feature-title">{f_list.title}</button>
            {f_list.values.map((f_list_value) => (
              <button className="feature-title-list">{f_list_value}</button>
            ))}
          </div>
        ))}
      </div>
    </div>
  </React.Fragment>

我在 React 组件的 render 方法中有上面的代码，并且我有 key-value 作为父 div 元素的属性。仍然，我在控制台中遇到错误。

警告：列表中的每个孩子都应该有一个唯一的“key”道具。

如何解决？

【问题讨论】：

你有一个嵌套的地图。它也需要一个key 在顶部节点。
{ title: "Js, values: ["s1", "s2"]} 似乎在某处缺少 "。
请在询问之前做一些研究。对警告文本进行简单搜索就会发现许多关于此警告的问题。

标签： javascript reactjs

【解决方案1】：

您还需要为按钮指定key：

{f_list.values.map((f_list_value, idx) => (
    <button className="feature-title-list" key={idx}>{f_list_value}</button>
))}

【讨论】：

【解决方案2】：

你可以用这样的代码来修复：

{f_list.values.map((f_list_value, index) => (
   <button className="feature-title-list" key={index}>{f_list_value}</button>
))}

如果你渲染一个元素列表，你必须添加一个额外的属性键。此属性唯一标识您的元素。

【讨论】：