列表中的每个孩子都应该有一个唯一的“关键”道具 React 中的错误

Question

您好，我目前正在使用 Spotify API，Spring Boot 作为后端，React 作为前端。 我能够使用 json 格式的 API 检索用户最喜欢的艺术家，但由于我不熟悉 React，我目前在显示数据时遇到问题。

我检索到的 json 数据看起来像这样。

[{"externalUrls":{"externalUrls":{"spotify":"https://open.spotify.com/artist/3dz0NnIZhtKKeXZxLOxCam"}},"followers":{"href":null,"total":929384},"genres":["complextro","edm","progressive electro house"],"href":"https://api.spotify.com/v1/artists/3dz0NnIZhtKKeXZxLOxCam","id":"3dz0NnIZhtKKeXZxLOxCam","images":[{"height":640,"url":"https://i.scdn.co/image/ab6761610000e5eb1804f56bdcb9322c5f3f8f21","width":640},{"height":320,"url":"https://i.scdn.co/image/ab676161000051741804f56bdcb9322c5f3f8f21","width":320},{"height":160,"url":"https://i.scdn.co/image/ab6761610000f1781804f56bdcb9322c5f3f8f21","width":160}],"name":"Porter Robinson","popularity":68,"type":"ARTIST","uri":"spotify:artist:3dz0NnIZhtKKeXZxLOxCam"},{"externalUrls":{"externalUrls":{"spotify":"https://open.spotify.com/artist/6M2wZ9GZgrQXHCFfjv46we"}},"followers":{"href":null,"total":27618208},"genres":["dance pop","pop","uk pop"],"href":"https://api.spotify.com/v1/artists/6M2wZ9GZgrQXHCFfjv46we","id":"6M2wZ9GZgrQXHCFfjv46we","images":[{"height":640,"url":"https://i.scdn.co/image/ab6761610000e5ebd42a27db3286b58553da8858","width":640},{"height":320,"url":"https://i.scdn.co/image/ab67616100005174d42a27db3286b58553da8858","width":320},{"height":160,"url":"https://i.scdn.co/image/ab6761610000f178d42a27db3286b58553da8858","width":160}],"name":"Dua Lipa","popularity":94,"type":"ARTIST","uri":"spotify:artist:6M2wZ9GZgrQXHCFfjv46we"}]

我希望用 React 显示这个，但似乎遇到了一个错误，显示为 “警告：列表中的每个孩子都应该有一个唯一的“关键”道具。”

我的 React 应用程序中的“ListArtistComponent.jsx”文件看起来像这样。

    class ListArtistComponent extends Component{
    constructor(props) {
        super(props);
        this.state = {
            artist: []

        }
    }
    componentDidMount(){
        ArtistService.getArtist().then((res) => {
            this.setState({ artist: Array.from(res.data)});
        });
    }

    render() {
        return(
            <div>
                <h2 className="text-center">Artist List</h2>
                <div className="row">
                    <table className="table table-striped table-bordered">

                        <thead>
                            <tr>
                                <th>Artist Name</th>
                                <th>Artist Popularity</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.artist.map(
                                    artist =>
                                        <tr key = {artist.id}>
                                            <td> {artist.name} </td>
                                            <td> {artist.popularity} </td>
                                        </tr>
                                )
                            }
                        </tbody>

                    </table>
                </div>
            </div>
        )
    }
}
export default ListArtistComponent;

我的 ArtistService 看起来像这样

    class ArtistService {

    getArtist(){
        return axios.get("http://localhost:8080/api/topartist")
    }
}
export default new ArtistService()

我猜在将“id”（分别在给定的 json“3dz0NnIZhtKKeXZxLOxCam”和“6M2wZ9GZgrQXHCFfjv46we”中）值设置为键时出现问题，如果我能知道似乎是什么导致了问题，将不胜感激以及解决方案。 提前谢谢你！

Answer 1

我看不出有什么问题。 但是如果我们使用数组索引作为唯一键。 你可以试试这个吗？

class ListArtistComponent extends Component{
 constructor(props) {
  super(props);
  this.state = {
    artist: []

  }
 }
componentDidMount(){
 ArtistService.getArtist().then((res) => {
    this.setState({ artist: Array.from(res.data)});
 });
}

render() {
 return(
    <div>
        <h2 className="text-center">Artist List</h2>
        <div className="row">
            <table className="table table-striped table-bordered">

                <thead>
                    <tr>
                        <th>Artist Name</th>
                        <th>Artist Popularity</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        this.state.artist.map(
                             (artist,index) =>
                                <tr key = {index}>
                                    <td> {artist.name} </td>
                                    <td> {artist.popularity} </td>
                                </tr>
                        )
                    }
                </tbody>

            </table>
        </div>
    </div>
 )
}