javascript - 渲染()函数中的 react 警告 : Each child in a list should have a unique "key" prop.

Question

这个问题在这里已经有了答案:

Understanding unique keys for array children in React.js (24 个回答)

关闭 2年前.

我正在调用一个 API 端点，将它的数据保存到一个状态，然后渲染它。它显示在浏览器中，但控制台上有警告:Warning: Each child in a list should have a unique "key" prop. .

我的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;

我不明白将 key prop 放在 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;

不使用 key Prop 带来了哪些改进？我对这些感到不知所措<div>...</div>标签。

Answer 1

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

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_name+profile.last_name) 作为不同上下文中其他地方的键。