Javascript 警告：列表中的每个子项都应具有唯一的；“关键”；道具，即使它有独特的关键反应

所以我想渲染数组，但它一直在说，警告：列表中的每个子级都应该有一个唯一的“键”道具，即使它有唯一的键，我的数组包含三个元素，它甚至不能正确渲染第三个数组，由于某种原因，按钮甚至不能工作

import React，{useffect，useRef}来自“React”；
从“/firebase”导入火；
从“firebase”导入firebase
从“react”导入{useState}
从“/Header”导入标题
从“/Nav”导入导航
从“react router dom”导入{NavLink，Redirect}；
从“/AudioPlayer”导入AudioPlayer
常量音乐=（{match}）=>{
const audioRef=useRef（）；
const audioPlayer=audioRef.current
const[audioSrc，setAudioSrc]=useState（）
常量[musics，setMusics]=useState（[]）
const[user，setUser]=useState（null）
常量[pfp，setPfp]=useState（null）
常量[audioTitle，setAudioTitle]=useState（null）
常量{params:{uID}}=match；
var用户名；
var tracksTitle=[]；
useffect（（）=>{
firebase.database（）.ref（“用户/”+uID+“/praivate/login凭据”）.on（“值”，（快照）=>{
setUser（snapshot.val（）.userName）
setUser（snapshot.val（）.userName）
})
firebase.database（）.ref（“用户/”+uID+“/public/profile/pic”）.on（“值”，（快照）=>{
console.log（snapshot.val（）.pfpUrl）
setPfp（snapshot.val（）.pfpUrl）
})
}, [])
音乐；
//也许问题就在这里的某个地方
useffect（（）=>{
firebase.database（）.ref（“用户/”+uID+“/public/songs/”）.on（“值”，（快照）=>{
//在音乐中存储数据。
music=snapshot.val（）
//获取数据的所有标题
Object.values（music）.forEach（（value）=>{
tracksTitle.push（value.title）//将标题推送到tracksTitle
})
setMusics（tracksTitle）//在musics中存储所有曲目标题
})
}，[uID]）
const[progVal，setProgVal]=useState（“0%”）
功能更新（事件）{
让持续时间=（event.target.currentTime/event.target.duration）*100
setProgVal（持续时间）
}
功能播放（活动）{
常量值=event.target.getAttribute（“值”）
console.log（值）
如果（值）{
firebase.database（）.ref（“public/songs/”+value）.on（“value”，（snapshot）=>{
setAudioSrc（snapshot.val（）.aduioURL）
})
}
setAudioTitle（值）
audioPlayer.play（）
}
函数playAudio（）{
audioPlayer.play（）
}
功能停止（事件）{
audioPlayer.pause（）
}
返回(
{user}
音乐
播放列表
关于

{music&&music.map（（名称，i）=>{
console.log（）
返回(
//它无法正确渲染第三个数组
播放{name}
)
})}

)
}  
导出默认音乐
//

React键需要位于映射返回的最外层元素上

{musics && musics.map((name, i)=>{
  return(
  <Fragment key={i}>
    //it does not render the third array properly
    <li>
      <button onClick={play} value={name}>Play</button>
      {name}
    </li>
  </Fragment>)
})}

---

首先，您使用数组的索引作为键。这会引起问题。如果歌曲有唯一的名称，您可以使用名称本身作为键。您对片段的使用也有问题。在这种情况下，使用片段几乎毫无意义。@Laras谢谢，我试过了，但我不知道为什么，第三个呈现的项目没有正确呈现，我无法选择文本，也无法单击按钮。所以，如果我读得正确，

musics

只是一个标题数组？是否使用此处提供的解决方案之一解决react键错误？你能再描述一下第三个列表项不起作用是什么意思吗？这只是第三次吗？（第1、第2、第4、第5等。全部工作？）如果react键问题已解决，并且您现在出现了一些新错误，那么我是否可以建议针对新问题提出一个新问题？在最后一个屏幕盖中，

li

元素的映射完全按照预期工作。似乎有什么东西（一个不可见的元素）覆盖在你的UI上，不允许点击。您也检查过DOM以查看所有呈现到屏幕上的内容吗？嗯，列表元素本身没有分配给它们的类名，但我指的是UI中可能通过鼠标覆盖它们的其他内容，即一些不可见的内容，绝对定位元素。此解决方案还使用数组中的索引作为键，在React中强烈不建议使用该键。@LarshHoldaas不建议使用，是的，禁止使用，完全不建议使用。它符合使用的可接受性标准，即数组似乎没有被重新排序或添加/删除元素。据我所知，数组元素只是切换播放状态。OP的问题与此无关。@DjBilljeOfficial您的

music

状态数组是否正确形成？这，对我来说，意味着

{musics && musics.map((name, i)=>{
  return(
  <li key={i}>
    <button onClick={play} value={name}>Play</button>
    {name}
  </li>)
})}