无法使用挂钩映射获取的数据答案

【问题标题】：Can't map fetched data using hooks无法使用挂钩映射获取的数据
【发布时间】：2021-02-06 21:41:41
【问题描述】：

我尝试显示有关存储在音乐挂钩中的音乐的信息，但浏览器抱怨向我显示此错误 TypeError: Cannot read property 'map' of undefined。

控制台向我显示获取的数据。这是一个包含 25 个对象的数组。我尝试了 music.data && music.data.map

function App() {
  
  const [ playlist, setPlaylist ] = useState('beyonce')
  const [music, saveMusic ] = useState([])
  useEffect(() => {
    console.log('new playlist')
    fetch(`https://rapidapi.p.rapidapi.com/search?q=${playlist}`, {
          "method": "GET",
          "headers": {
            "x-rapidapi-host": "deezerdevs-deezer.p.rapidapi.com",
            
          }
        })
        .then(response => response.json())
        .then(json => saveMusic(json))
       
  
  }, [playlist])
  console.log(music)
  return (
    <div>
       <h2>useEffect practice</h2>
      <div>
       <button onClick={() => setPlaylist('beyonce')}>Playlist 1</button>
       <button onClick={() => setPlaylist('eminem')}>Playlist 2</button>
       <button onClick={() => setPlaylist('ac/dc')}>Playlist 3</button>
       </div>
       <div>
         <h5>{playlist}</h5>
        
         {music.data.map(i => {
           return (
             <>
                  <img style={{width: '100px'}} src={i.album.cover_big} />
                 <p>{i.title}</p>
             </>
           )
         })}
       </div>
    </div>
  );
}

export default App;

我尝试显示有关存储在音乐挂钩中的音乐的信息，但浏览器抱怨向我显示此错误 TypeError: Cannot read property 'map' of undefined。

【问题讨论】：

你的初始状态是一个空数组。数组没有 .data 属性。你的意思是useState({ data: [] })？
试试music.data && music.data.map

标签： reactjs api react-hooks jsx

【解决方案1】：

music.data 在第一次渲染时不存在。您可以使用{ data: [] } 初始化music：

const [music, saveMusic ] = useState({ data: [] })

或者在尝试map之前检查music.data是否存在：

{music.data && music.data.map(i => {
  return (
    <>
        <img style={{width: '100px'}} src={i.album.cover_big} />
        <p>{i.title}</p>
    </>
  )
})}

如果你想确保music.data 是一个数组，你可以使用Array.isArray()。

【讨论】：