类型错误：无法读取 react.js 中未定义的属性“map”

Question

大家好，我是 React js 的新手，它一直在说 TypeError：无法读取 react.js 中未定义的属性“地图”，即使它不是未定义的。

//my variables    
    const [musics, setMusics] = useState()
    const [user, setUser] = useState(null)
    const [pfp, setPfp] = useState(null)
    const { params: { uID } } = match;
    var userName;
    var musicArray = [];
//use effect so it does not infinite loop     
 useEffect(()=>{   firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{
            var music = snapshot.val()
            //gets title of each songs
            Object.values(music).forEach((value)=>{  
                musicArray.push(value.title)//pushes value to array
                setMusics(musicArray)//sets that array to musics
                
            })
        })    
    }, [])
    
    return(
           .....
          <div class = "music-content-container">
                    <div class = "music-box">
                        <div class = "user-musics">
                            <ul>
                            //says TypeError: Cannot read property 'map' of undefined even tho its defined
                                {musics.map((name)=>{   
                                    return <li>{name}</li>
                                })}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
         .....
            )

我该如何解决这个问题？有没有什么办法解决这一问题？

Answer 1

musicsstate的初始值未定义。你应该像这样给出初始值。

const [musics, setMusics] = useState([])