每次在反应中获取数据时如何创建新元素并渲染数据

Question

我是新手，我需要渲染和列出从 firebase 获取的数据到我尝试这样做的 html，

const Music = ({ match }) => {
    const [title, setTitle] = useState(null)
    const [user, setUser] = useState(null)
    const [pfp, setPfp] = useState(null)
    const { params: { uID } } = match;
useEffect(()=>{  firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{
            var musics = snapshot.val()
            Object.values(musics).forEach((value)=>{ 
            //I need to render this title each and create new li
                setTitle(<li>{value.title}</li>)
                
            })
        })    
    }, [])
    
    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>
                            //the title should rendered over here
                                {title}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <Header />
   )
}

但它只呈现一个元素。虽然我的数据库中有 5 个元素。如何解决/做到这一点？ 如何让程序创建所有 5 个

标签并渲染数据？

Answer 1

不要在useEffect中渲染东西，只是用它来添加逻辑和设置状态：

const Music = ({ match }) => {
    const [musics, setMusics] = useState([])
    const [user, setUser] = useState(null)
    const [pfp, setPfp] = useState(null)
    const { params: { uID } } = match;
useEffect(()=>{  
     
        firebase.database()
        .ref("users/"+uID+"/public/songs/")
         .on("value", (snapshot)=>{
            var musics = snapshot.val()
            //not sure how music obj is , just set it as an array of something
            setMusics(musics)
        })    
    }, [])
    
    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>
               {musics &&
                <div class = "music-content-container">
                    <div class = "music-box">
                        <div class = "user-musics">
                            <ul>
                          {musics.map((el,key)=><li>{el.title}</li>) }}
                            </ul>
                        </div>
                    </div>
                </div>}

            </div>

            <Header />
   )
}