.map函数没有在react js中呈现所有数据

Question

我刚开始反应，遇到了这个问题，我正在尝试解决这个问题，map函数没有渲染数组的所有元素，它只渲染数组的第一个元素，但它在我刷新一次时渲染。如果你能在这里找到问题，我将不胜感激。或者告诉我获取和呈现数据的更好选项

import React, { useEffect } 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 [musics, setMusics] = useState([])
const [user, setUser] = useState(null)
const [pfp, setPfp] = useState(null)
const { params: { uID } } = match;
var userName;
var musicArray = [];
//ignore this section
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)
})
}, [])
//problem comes over here
var music;
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)=>{  
musicArray.push(value.title)//pushes titles to musicArray
setMusics(musicArray) //stores music array in nusics
})
})

}, [music, uID])
return(
<>
<Nav />
<div id = "profile" className = "main">
<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, index)=>{
console.log(name)<!----consolelogs music[0] two times for some reason and music[1] one time---->
return <li key = {index}>{name}</li>//<!----it should print 2 datas but prints only one. but when i refresh again it shows 2 datas--->
})}
</ul>
</div>
</div>
</div>
</div>
<Header />

)
}



export default Music

Answer 1

不应该以这种方式代替

Object.values(music).forEach((value)=>{  
musicArray.push(value.title)//pushes titles to musicArray
setMusics(musicArray) //stores music array in nusics
})

取而代之的是

Object.values(music).forEach((value)=>{  
musicArray.push(value.title)//pushes titles to musicArray

})
setMusics(musicArray) //stores music array in nusics

Answer 2

您正在为每个迭代设置状态，这就是它没有完全呈现的原因。

尝试将您的useEffect更改为以下

useEffect(()=>{

firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{
//stores data in music.
const music = snapshot.val()
//gets all title of the data
const res = Object.values(music).map((value)=> value.title )
setMusics(m => ([...m, ...res])) //if you want to append these to existing state, if you want to replace the entire state then use `setMusics(res)`
})

}, [music, uID])