.map 函数未在反应 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])