React渲染Spotify API返回艺术家列表时报key prop唯一警告如何解决

报错原因排查 #

• 检查接口返回的数据类型是否正确
  部分后端接口会直接返回序列化后的JSON字符串而非解析后的JS数组，此时你直接对res.data执行Array.from会把字符串拆成单个字符的数组，自然取不到每个元素的id字段，导致所有key都是undefined触发警告。你可以在回调中加打印确认：

  componentDidMount(){
      ArtistService.getArtist().then((res) => {
          console.log('返回数据类型：', typeof res.data)
          console.log('是否为数组：', Array.isArray(res.data))
          this.setState({ artist: Array.from(res.data)});
      });
  }
  

  如果打印显示是字符串类型，先调用JSON.parse解析后再赋值即可。
• 检查id字段是否存在空值/重复值
  逐个确认数组中每个艺术家条目都有合法的id值，不存在两条完全相同的id，空值或重复值都会触发key唯一性警告。
• 检查数据嵌套结构是否符合预期
  若后端接口统一做了响应封装，例如返回格式为{code: 200, msg: "success", data: [艺术家数组]}，此时你取res.data拿到的是外层的响应对象而非艺术家数组，同样会取不到正确的id。
• 检查组件内其他列表是否未加key
  警告可能不是当前这段表格列表触发的，确认组件内其他使用map渲染的节点是否都加了唯一key属性。

解决方案 #

1. 确认数据格式正确的前提下，res.data本身是数组的话不需要额外调用Array.from，直接赋值即可：

this.setState({ artist: res.data });

2. 如果确实存在偶发的id重复/空值，可临时用map的索引作为兜底key（列表有增删排序需求时不推荐长期使用）：

this.state.artist.map(
    (artist, index) =>
        <tr key={index}>
            <td> {artist.name} </td>
            <td> {artist.popularity} </td>
        </tr>
)

3. 如果id本身是唯一合法的，可转成字符串类型再绑定规避类型问题：

<tr key={String(artist.id)}>

内容的提问来源于stack exchange，提问作者Adam Lee