Data.map 不是函数 API 请求答案

【问题标题】：Data.map is not a function API requestData.map 不是函数 API 请求
【发布时间】：2021-10-24 23:20:38
【问题描述】：

我正在尝试获取 API 数据，但错误显示 data.map 不是函数（在我的例子中是 users.map）。请帮帮我。我收到 map.data 未定义为函数的错误？看着它我不知道什么不起作用。

import React, { useEffect, useState } from "react";
import "./bodypart.css";

const Bodypart = () => {
  const [users, setUsers] = useState([]);

  const getUsers = async () => {
    const response = await fetch(
      "https://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=XXXXXXXXXXXXXXXXXXXXX&format=json&nojsoncallback=1"
    );
    setUsers(await response.json());
  };

  useEffect(() => {
    getUsers();
  }, []);

  return (
    <div className="bodypart">
      <div className="bodypart__image">
        <div className="image">
          {users.map((curElem) => {
            return (
              <img
                src="https://www.thisislocallondon.co.uk/resources/images/12088462.jpg?display=1&htype=0&type=responsive-gallery"
                classname="bodypart__image"
                alt=""
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Bodypart;

API 数据如下所示。我自己无法解决问题。


{
  "photos": {
    "page": 1,
    "pages": 10,
    "perpage": 100,
    "total": 1000,
    "photo": [
      {
        "id": "51398681312",
        "owner": "193303965@N08",
        "secret": "594df2ff71",
        "server": "65535",
        "farm": 66,
        "title": "",
        "ispublic": 1,
        "isfriend": 0,
        "isfamily": 0
      },
      {
        "id": "51398681362",
        "owner": "193209554@N03",
        "secret": "2de06284c5",
        "server": "65535",
        "farm": 66,
        "title": "SPIDERMAN NO WAY HOME RETOUCHES",
        "ispublic": 1,
        "isfriend": 0,
        "isfamily": 0
      },
      {
        "id": "51398682272",
        "owner": "193683913@N05",
        "secret": "d8258fa802",
        "server": "65535",
        "farm": 66,
        "title": "Türkiyədə FACİƏ: Sosial şəbəkə üçün video çəkən qız yüksəklikdən yerə çırpıldı - ANBAAN VİDEO",
        "ispublic": 1,
        "isfriend": 0,
        "isfamily": 0
      },
]
}

编辑：你好朋友，我得到了答案而不是

          {users.map((curElem) => {

我们将不得不写

          {users.photos.photo.map((curElem) => {

编辑 2

我应该在控制台语句中写什么来返回照片的 id

{
  "photos": {
    "page": 1,
    "pages": 10,
    "perpage": 100,
    "total": 1000,
    "photo": [
      {
        "id": "51400489782",
        "owner": "144450638@N02",
        "secret": "2e68b6bb36",
        "server": "65535",
        "farm": 66,
        "title": "riki-shaham-wong-ping",
        "ispublic": 1,
        "isfriend": 0,
        "isfamily": 0
      },

【问题讨论】：

最可靠的可能是在您的组件中执行类似users && typeof users.map === 'function' && users.map(yourMapFunc) 的操作。
然后您可以通过按F12 打开开发工具并打开网络选项卡。您可以在那里检查您的请求，看看它实际在做什么，以及它是否返回了您所期望的。
您还应该在异步调用中添加错误处理。否则，迟早您会遇到未处理的拒绝错误或类似问题。
返回值不是数组。它也是一个用户列表。
它是一个对象而不是一个数组。像这样格式化时很难阅读。看起来几乎无效。

标签： javascript reactjs api

【解决方案1】：

很明显，您的 API 调用返回未定义或类似性质的东西，这会将 users 设置为 undefined。然后当你稍后使用时，你不能在 undefined 上调用 map，这是你得到的错误。

您必须首先验证发生这种情况的原因并设置一些默认值，以免遇到运行时异常。

setUsers((await response.json()) ?? []);

【讨论】：

【解决方案2】：

在getUsers 中检查您的提取部分。我复制了 API 地址，得到了这个错误。

{"stat":"fail","code":100,"message":"Invalid API Key (Key has invalid format)"}

您可以按如下方式更新您的功能。

 const response = await fetch(
      ...url
    );
 const data = response.json()

 if(Array.isArray(data))
    setUsers(data);

【讨论】：

因为你没有API密钥，所以OP可能没有分享真实的。
也许吧。这种情况下，我建议复制url，打开浏览器粘贴，自己测试结果。
这看起来不像是 API 密钥 XXXXXXXXXXXXXXXXXXXXX。最好是更改代码以处理可能的故障响应。你永远不知道 API 服务器何时宕机。然后，检查为什么它没有给出正确的响应。
API 工作正常。我特意在那里写了“XXX”。
没关系。无论如何，您尝试过解决方案吗？

【解决方案3】：

尝试在该组件的某处放置console.log(users)，以查看fetch 从flickr 返回的内容。它可能是您需要从中提取数组属性的对象。

然后检查浏览器开发者工具控制台。您应该在类型错误之前看到两个控制台输出；第一次渲染的空数组 [] 和第二次渲染期间 fetch 调用的响应。

const [users, setUsers] = useState([]);
console.log('Users: ', users);

【讨论】：