.map函数未在React JS中呈现所有数据

debugcn 发表于 Dev

DjBillje官方

我是新来的反应者，我遇到了这个问题，我正在尝试解决此问题，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

昏迷的托马斯

不应以这种方式代替

 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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。