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

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获得的数据如下所示：

此代码将选择每个数据的标题

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”上时，“fikka-fikka”的按钮甚至不起作用。在ed sheeran和一个方向上，它甚至不会将光标更改为文本curosr。它没有这个问题

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

请注意，为了做到这一点，react fragment速记不兼容，必须使用fragment组件。或者，由于只有一个元素，片段基本上是无用的，请将其移除，然后将键放在li原来的位置。

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