TypeError：無法讀取 react.js 中未定義的屬性“地圖”

Question

大家好，我是反應 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

musics state 的初始值未定義。 你應該像這樣給出初始值。

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

Answer 2

這是因為當您使用useState為musics定義 state 時，您沒有指定初始值。 因此，ReactJS 不知道musics是什么類型。

好的做法是在使用 useState 時始終提供初始useState 。 在您的情況下，它只是提供一個空數組。

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

我什至會進一步 go 並將musics重命名為類似tracks的名稱，因為這樣更具可讀性。

作為對代碼的進一步重構，我會避免使用var ，而是使用const定義變量（如果它不會被更改，或者如果let希望重新分配它）。

我還注意到，在您的useEffect中，您沒有為musicArray和uID的依賴數組提供值，因為它們是在useEffect之外聲明的。 為避免不必要的重新渲染，請始終在依賴數組中提供外部值。 這樣，當依賴數組中的值發生變化時，將觸發useEffect 。

useEffect(() => {
   ...
  }, [musicArray, uID]);

此外，當使用 React 時，在 JSX 中使用className而不是class ，因為這就是 React 對 map 使用的class屬性。 這只是你需要記住的 React 事情之一。

所以在你的 JSX 中你會寫這樣的東西

<div className="music-content-container">
...
</div>

Answer 3

組件第一次渲染時是 null，直到 useEffect 設置數據。 我會將它初始化為 useState 中的一個空數組。