React - 当我与 axios 一起使用时，地图不是一个函数 [关闭]

Posted 2023-02-22

【中文标题】React - 当我与 axios 一起使用时，地图不是一个函数 [关闭]

【英文标题】：React - map is not a function when I use with axios [closed]

【发布时间】：2022-01-18 17:02:17

【问题描述】：

我正在尝试从我的 API 中显示作者列表，我已经创建了简单的组件，并且正在使用 axios。我的 API 如下所示：

    "links": [
        
            "rel": "self",
            "href": "http://localhost:8080/booker/api/authors"
        
    ],
    "content": [
        
            "authorId": 4,
            "firstName": "Tonyslav",
            "lastName": "Shamal",
            "webPage": "www.tonisha.gov",
            "dateCreated": "2021-12-15T11:58:28.829+00:00",
            "numberOfBooks": 13,
            "links": [
                
                    "rel": "books",
                    "href": "http://localhost:8080/booker/api/books/author/4"
                
            ]
        ,
        
            "authorId": 6,
            "firstName": "Georgio",
            "lastName": "Martinez",
            "webPage": "www.got.gov",
            "dateCreated": "2021-12-15T11:58:28.829+00:00",
            "numberOfBooks": 16,
            "links": [
                
                    "rel": "books",
                    "href": "http://localhost:8080/booker/api/books/author/6"
                
            ]
        

我的 React 组件看起来像这样：

import  useEffect, useState  from 'react';
import axios from 'axios';

const Authors = () => 
    const [authors, setAuthors] = useState([]);
    useEffect(() => 

        axios.get('http://localhost:8080/booker/api/authors')
            .then(res => 
                setAuthors(res.data);
            )
            .catch(err => console.log(err));
    , []);

    return (
        <div>
            authors.map(author => (
                <div className="card" key=author.content.authorId>
                    author.content.firstName
                </div>
            ))
        </div>
    );


export default Authors;

这是来自控制台的错误

TypeError: authors.map is not a function

谁能帮我解决这个问题，我无法解决这个错误。

【问题讨论】：

您确定从 API 获取数组吗？你能 console.log res.data 给我们看看结果吗

数据中的第一个字符是。这不会启动数组。为什么要有map 方法？您不能只忽略数据结构的整个级别。

你的响应不是一个数组，而是一个对象

map是内置对象Array MDN链接：#的方法

【参考方案1】：

响应是一个对象，而不是一个数组，所以你不能映射它。 你可能想要更接近这个的东西：

.then(res => 
    setAuthors(res.data.content);
)

假设您想遍历该数组。 然后渲染看起来像这样：

<div>
    authors.map(author => (
        <div className="card" key=author.authorId>
            author.firstName
        </div>
    ))
</div>

【讨论】：

感谢您的帮助。我有一个简单的问题，我可以获取这样的链接吗，author.links.href？