無法使用鈎子在 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數組。