警告：列表中的每个孩子都应该有一个唯一的“key”道具，即使它有唯一的 key React

Question

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

 import React, { useEffect, useRef } from "react"; import fire from "./firebase"; import firebase from "firebase" import { useState } from "react" import Header from "./header" import Nav from "./nav" import { NavLink, Redirect } from "react-router-dom"; import AudioPlayer from "./audioplayer" const Music = ({ match }) => { const audioRef = useRef(); const audioPlayer = audioRef.current const [audioSrc, setAudioSrc] = useState() const [musics, setMusics] = useState([]) const [user, setUser] = useState(null) const [pfp, setPfp] = useState(null) const [audioTitle, setAudioTitle] = useState(null) const { params: { uID } } = match; var userName; var tracksTitle = []; useEffect(()=>{ firebase.database().ref("users/"+uID+"/praivate/login credentials").on("value", (snapshot)=>{ setUser(snapshot.val().userName) setUser(snapshot.val().userName) }) firebase.database().ref("users/"+uID+"/public/profile/pic").on("value", (snapshot)=>{ console.log(snapshot.val().pfpUrl) setPfp(snapshot.val().pfpUrl) }) }, []) var music; //maybe the problem is over here somewhere useEffect(()=>{ firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{ //stores data in music. music = snapshot.val() //gets all title of the data Object.values(music).forEach((value)=>{ tracksTitle.push(value.title)//pushes titles to tracksTitle }) setMusics(tracksTitle) //stores all track title in musics }) }, [uID]) const [progVal, setProgVal] = useState("0%") function update(event){ let duration = (event.target.currentTime/event.target.duration)*100 setProgVal(duration) } function play(event){ const value = event.target.getAttribute("value") console.log(value) if(value){ firebase.database().ref("public/songs/"+value).on("value", (snapshot)=>{ setAudioSrc(snapshot.val().aduioURL) }) } setAudioTitle(value) audioPlayer.play() } function playAudio(){ audioPlayer.play() } function stop(event){ audioPlayer.pause() } return( <> <Nav /> <div id = "profile" className = "main"> <audio id = "player" ref = {audioRef} src = {audioSrc} name = "audioplayer" onTimeUpdate = {update}> </audio> <div class = "profile-container"> <div className = "cover-pic"> <img src = "" /> <div className = "pfp"> <img src = {pfp} height = "100" width = "100"/> </div> <div className = "User-Name"> <h1>{user}</h1> </div> </div> <div class = "tabsContainer"> <div class = "tabs-holder"> <NavLink to = {"/u/"+uID+"/music"}><button><span>Music</span></button></NavLink> <button><span>Playlist</span></button> <button><span>About</span></button> </div> </div> </div> <div class = "music-content-container"> <div class = "music-box"> <div class = "user-musics"> <ul> {musics && musics.map((name, i)=>{ console.log() return( <> //it does not render the third array properly <li key = {i}><button onClick = {play} value = {name}>Play</button>{name}</li> </> ) })} </ul> </div> </div> </div> </div> <AudioPlayer progVal = {progVal} stop = {stop} playAudio = {playAudio}/> <Header /> </> ) } export default Music //

各位大神能帮我解决一下问题吗，先谢谢了。

更新：我来自 firebase 的数据如下所示：

这段代码将 select 每个数据的标题

 useEffect(()=>{ firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{ //stores data in music. music = snapshot.val() console.log(music) //gets all title of the data Object.values(music).forEach((value)=>{ tracksTitle.push(value.title)//pushes titles to tracksTitle }) setMusics(tracksTitle) //stores all track in musics })

当我在“fikka fikka”上使用 hover 时，“fikka fikka”的按钮甚至不起作用，它甚至没有将 cursor 更改为 text curosr 而在 ed sheeran 和一个方向上它没有这个问题

Answer 1

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>)
})}

请注意，为了做到这一点，反应片段简写是不兼容的，您必须使用Fragment组件。 或者因为只有一个元素，所以Fragment几乎没有用，删除它并将密钥放在它所在的li上。

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