TypeError：无法读取 react.js 中未定义的属性“地图”

Question

大家好，我是 react js 的新手，它一直说 TypeError: Cannot read property 'map' of undefined in 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 状态的初始值未定义。你应该像这样给出初始值。

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

Answer 2

这是因为当您使用useState 为musics 定义状态时，您没有指定初始值。因此，ReactJS 不知道musics 是什么类型。

好的做法是在使用useState 时始终提供初始状态。在您的情况下，它只是提供一个空数组。

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

我什至会更进一步，将 musics 重命名为 tracks 之类的名称，因为这样更具可读性。

作为对代码的进一步重构，我会避免使用var，而是使用const 定义变量（如果它不会被更改）或let（如果你希望重新分配它）。

我还注意到，在您的 useEffect 中，您没有为 musicArray 和 uID 的依赖数组提供值，因为它们是在 useEffect 之外声明的。为避免不必要的重新渲染，请始终在依赖数组中提供外部值。这样，当依赖数组中的值发生变化时，useEffect就会被触发。

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

另外，当使用 React 时，在 JSX 中使用 className 而不是 class，因为这是 React 用来将其映射到 HTML class 属性的方法。这只是你需要记住的 React 事情之一。

所以在你的 JSX 中你会写这样的东西

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

Answer 3

组件第一次渲染直到useEffect设置数据时为null。我会在 useState 中将它初始化为一个空数组。