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

Posted 2023-04-15

【中文标题】无法使用钩子在 React 中设置状态

【英文标题】：Can't set state in React using hooks

【发布时间】：2020-05-12 03:54:13

【问题描述】：

我正在开发一个相当简单的应用程序来学习 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 似乎从未设置或设置错误。你能帮我理解我的代码有什么问题吗？提前致谢！

【问题讨论】：

您将 array 设置为 data 状态 (result.data.items) 的内容，因此您的代码可能应该是 data.map(...)。

【参考方案1】：

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

setData( songs: result.data.items );

这对你有用。

【参考方案2】：

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

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

【参考方案3】：

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

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