数组或迭代器中的每个孩子都应该有一个唯一的“key”道具（使用 Rails 和 React）

Question

当我尝试遍历我的变量 badges 并显示每个徽章时，我收到此错误：

数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。

    var badges = author.badges.map((badge, index) => <span className="author__badge">
                                                        <Icon key={"icon" + index} name={`icon-${badge}`} />
                                                       </span>;
                                  );
      return (

          <span className="author__name">{author.name}</span>

            { author.badge === "" ||
                badges
            }
            <span className="author__nickname">{author.nickname}</span>
          </div>
      );

Answer 1

如React Documentation 中所述：

一个好的经验法则是 map() 调用中的元素需要键。

您需要使用key={ } 并为其赋予任何唯一值

当您没有稳定的渲染项目 ID 时，您可以使用项目索引作为键作为最后的手段

所以在你的情况下，其中一种方式（你可以相应地修改它）：

var badges = author.badges.map((badge, index) => 
              <span className="author__badge" key={index}>);

Answer 2

只需将键从 Icon 移动到包含数组外两个 span 的标记。

var badges = author.badges.map((badge, index) => <span className="author__badge">
                                                    <Icon key={author.name + "icon" + index} name={`icon-${badge}`} />
                                                   </span>;
                              );
  return (
      <div> // This was missing
      <span key={author.name} className="author__name">{author.name}</span>

        { author.badge === "" ||
            badges
        }
        <span key= {"nick" + author.name}className="author__nickname">{author.nickname}</span>
      </div>
  );

或类似的东西。如果使用了这个组件，那么 div 可能也需要一个键。