无法使用钩子在 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);。它给了我正确的输出：

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

Answer 1

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

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

这对你有用。

Answer 2

改成这个setData({songs: result.data.items});

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

Answer 3

考虑到你的组件是在发出请求之前挂载的，你也应该在渲染之前检查数据是否存在。如下所示：

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

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

Can't set state in React using hooks

spotify

reactjs