反应警告：列表中的每个孩子都应该有一个唯一的“键”道具。函数[duplicate]

Question

我调用一个APIendpoint，将其数据保存到一个状态，然后呈现它。它显示在浏览器中，但控制台上有一个警告：警告：列表中的每个子项都应该有一个唯一的“key”道具。。

我的app.js：

class App extends Component {
  render () {
    return (
      <div>
        <Profile profiles={this.state.profile} />
      </div>
   )
  }
  state = {
    profile: []
  };

  componentDidMount() {
    fetch('http://127.0.0.1:8000/profiles')
    .then(res => res.json())
    .then((data) => {
      this.setState({ profile : data })
    })
    .catch(console.log)
  }
}
export default App;

我不明白在render（）中该将关键道具放在哪里。这是我的代码片段profile.js：

const Profile = ({ profiles }) => {
  return (
    <div>
      <center><h1>Profiles List</h1></center>
      {profiles.map((profile) => (
        <div className="card">
          <div className="card-body">
            <h5 className="card-title">{profile.first_name} {profile.last_name}</h5>
            <h6 className="card-subtitle mb-2 text-muted">{profile.dob}</h6>
            <p className="card-text">{profile.sex}</p>
          </div>
        </div>
      ))};
    </div>
  )
};

export default Profile;

不使用钥匙道具会带来什么改进？我被这些




Answer 1

您必须将uniq值设置为键道具到地图中的第一个div

{profiles.map((profile) => (
        <div key={profile.id} className="card">

看医生

Answer 2

如果在JSX返回中使用map，则需要为父元素提供键属性，以便对其进行唯一标识。

https://reactjs.org/docs/lists-and-keys.html

您最好使用对象ID，但如果您知道一个字段（或字段组合）将构成一个唯一的关键字，那么您可以使用它来代替：

{profiles.map((profile) => (
  <div 
    key={'profileList_'+profile.first_name+profile.last_name} 
    className="card"
  >
    ...
  </div>
)};

注意：在这个示例中，我使用了profileList作为前缀，以防您需要在不同上下文中的其他地方使用相同的唯一标识符（对象ID或在本例中为profile.list\u name profile.last\u name）作为键。