每次获取数据时如何创建新元素并渲染数据 [英] How to create new element and render data each time the data is fetched in react

问题描述

我是新来的反应者，我需要渲染并列出从firebase提取的数据到我尝试执行的html，

I am new to react and I need to render and list data fetched from firebase to the html I tried doing this,

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个

标签并呈现数据?

but it only renders one element. While there are 5 elements in my database. How to fix/ do this? how to make the program create all 5

tags and render the data?

推荐答案

不要在useEffect中渲染东西，只需使用它来添加逻辑并设置状态:

Don't rendere stuff in useEffect, just use it to add logic and set state:

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 />
   )
}

这篇关于每次获取数据时如何创建新元素并渲染数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！