列表中的每个孩子都应该有一个唯一的 key prop

Question

Here is a link to a working example of the site: https://codesandbox.io/s/eloquent-kapitsa-kk1ls

The issue I am having is with Buttons.js:

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import registerIcons from "./FontAwesome";

registerIcons();

const DATA = [
  {
    href: "https://github.com/",
    icon: ["fab", "github"],
    label: "Github"
  },
  {
    href: "https://www.linkedin.com/in//",
    icon: ["fab", "linkedin"],
    label: "LinkedIn"
  },
  {
    href: "...",
    icon: ["fas", "file-alt"],
    label: "Resume"
  },
  {
    href: "mailto:",
    icon: ["fas", "paper-plane"],
    label: "Email me"
  }
];

const Icon = ({ href, icon, label }) => {
  return (
    <span className="button">
      <a href={href} target="_self" rel="noopener noreferrer">
        <FontAwesomeIcon className="icon" icon={icon} size="3x" />
        <span className="icon_title">{label}</span>
      </a>
    </span>
  );
};

class Buttons extends Component {
  render() {
    return (
      <div>
        {DATA.map(props => (
          <Icon {...props} />
        ))}
      </div>
    );
  }
}

export default Buttons;

I have looked through the other topics related to this issue and none are analogous to my case. I am not passing parameters to the render method - just taking an existing variable and mapping it to produce my output.

I have tried changing the Buttons render method to the code below in addition to a few other permutations of the DATA array without much progress.

      <div key={DATA.label}>
        {DATA.map(props => (
          <Icon {...props} />
        ))}
      </div>

I have also read through the React documentation on keys with no success.

Answer 1

you should change the code with this:

<div>
   {DATA.map((props,i) => (
      <Icon key={i} {...props} />
   ))}
</div>

Answer 2

As it is advised not to use index as a key for component. I would say add a random number and do something like below

<div>
   {DATA.map((props,i) => (
      <Icon key={Math.random()*1000*i} {...props} />
   ))}
</div>

This is rather a generic approach if you don't have any unique key in your object.

Answer 3

The key needs to go on like this:

<div key={DATA.label}>
 {DATA.map(props => (
   <Icon key={props.label} {...props} />
  ))}
</div>

As you probably saw in the React documentation on keys you reference, they say

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

Each of the objects in your DATA array have unique strings and you can use any of them key={props.href} or key={props.icon[1]} . I used props.label in the answer above but the point is it doesn't have to be totally unique in all the world, it just needs to be unique compared to the other items in the list.

Answer 4

Try

<Icon {...props} key={props.href} />

From react documentation

A good rule of thumb is that elements inside the map() call need keys.

Please take a look to this documentation

https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys