无法使用钩子在 React 中设置状态

Question

我正在开发一个相当简单的应用程序来学习 React Hooks，但我被卡住了。 我想从特定的 Spotify 播放列表中获取和显示数据。 到目前为止，这是我的组件：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function SongsList() {
    const [data, setData] = useState({ songs: [] });
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            const result = await axios.get('https://api.spotify.com/v1/playlists/37i9dQZEVXbMDoHDwVN2tF/tracks', {
                    headers: {
                        Authorization: 'Bearer sometoken'
                    }
                }
            )
            setData(result.data.items);
            console.log(result.data.items);
            setIsLoading(false);
        }
        fetchData();
    }, [])

    return (
        <div>
            {isLoading ? (
                <div>Loading...</div>
            ) : (
                <div>
                    {data.songs.map(song => (
                        <li key={song.track.id}>
                            <p>{song.track.artist}</p>
                        </li>
                    ))}
                </div>
            )
            }
        </div>
    )
}

export default SongsList;

此代码引发错误，指出TypeError: data.songs is undefined ，我不明白为什么会这样。 请注意，在我的fetchData函数中，我有来自控制台的日志，确保我至少获取任何数据： console.log(result.data.items); . 它给了我正确的输出：

但是我在useState输出中的data似乎从未设置或设置错误。 你能帮我理解我的代码有什么问题吗？ 提前致谢！

Answer 1

您没有以正确的方式设置data 。 您已将data声明为包含songs的对象。 您应该设置如下songs ：

setData({ songs: result.data.items });

这对你有用。

Answer 2

考虑到您的组件是在发出请求之前安装的，您还应该在渲染之前检查数据是否存在。 像下面这样：

{ data && data.songs.map(song => (
   <li key={song.track.id}>
       <p>{song.track.artist}</p>
   </li>
   )) 
}

Answer 3

更改为此setData({songs: result.data.items});

因为您正在对象中定义您的songs数组。