使用 API 数据映射渲染 React 组件； “未定义”错误答案

【问题标题】：Map rendering React components with API data; "undefined" error使用 API 数据映射渲染 React 组件； “未定义”错误
【发布时间】：2021-03-23 15:44:03
【问题描述】：

我在第一个重要的 React 项目中不断遇到这个错误。该错误具体是“TypeError：无法读取未定义的属性'map'。”发生此错误的原因是因为 React 在我测试它时似乎将每个组件加载了两次。

这就是我的意思。我正在尝试从我从 Spotify API 收到的 JSON 创建歌曲名称列表。每次加载应用程序时，我都需要先通过 Spotify 进行身份验证，然后才能接收数据。我相信这会导致未定义的错误，因为 React 在映射数据之前使用 map 函数加载组件。

import React from 'react';

function List(props) {

    const userData = props.userData;
    const favorites = Object.values(userData)[0]; // turns JSON object into usable array

    // console.log(favorites)
    // try {
    //     favorites.map( (item) => console.log(item.name));
    // } catch {
    //     console.log("No favorites");
    // }
    
    return (
        <div>
            <p>Your favorite songs are:</p>
            <ul>
                {favorites.map( (item) => (<li key={item.id}>{item.name}</li>))}
            </ul>
        </div>
    );
}

export default List;

如果我取消注释 try/catch 语句并废弃 return 语句，我会得到一个控制台输出 looks like this.

所以我的问题是如何/为什么会发生这种情况？映射您还没有的数据的最佳方法是什么？

【问题讨论】：

您可以 a) 通过最初将 [] 设置为 [] 来确保 favorites 始终是一个数组，或者 b) 使用条件渲染跳过它 {favorites && favorites.map && favorites.map(...)}（另外，请尝试谷歌搜索 @ 987654327@下一次，这将产生几十个现有的答案）
您可以在退货中添加条件，例如return({favorites && <div>......</div>});
重复Cannot read property 'map' of undefined

标签： javascript reactjs api dictionary

【解决方案1】：

你有几个选项，人们通常要么指定一个默认值，要么只在定义值时进行处理，我更喜欢选项 1，例如：

const favorites = Object.values(userData)[0] || []

【讨论】：

谢谢！我不知道您可以设置这样的默认值，并且尝试将 useState() 放入其中并没有那么好。