所以我想渲染数组，但它一直说，警告：列表中的每个子项都应该有一个唯一的“key”道具，即使它有唯一的键，我的数组包含三个元素，它甚至不能正确渲染第三个数组，由于某种原因，该按钮甚至无法在第三里工作。
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
//
Can you guys please help me to figure out the problem, thank you in advance.
更新：我的 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 和一个方向上它没有这个问题
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>)
})}
请注意，为了做到这一点，反应片段速记是不兼容的，你must使用Fragment成分。或者因为只有一个元素Fragment基本上没用，将其拆下并将钥匙放在li它在哪里。
{musics && musics.map((name, i)=>{
return(
<li key={i}>
<button onClick={play} value={name}>Play</button>
{name}
</li>)
})}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
