phone.map 不是一个函数 REACTJS

Question

我正在使用 . map 方法，我得到了phones.map 不是函数错误。

下面是我的代码

import { Link } from "react-router-dom";
import {React , useState , useEffect} from 'react'
import Axios from 'axios';
export default function Phones() {
  const [phones,setPhones] = useState([])
  useEffect(() => {
    Axios.get("https://dummyjson.com/products/search?q=phone")
    .then(res => {      
      setPhones(res.data)      
    }).catch(err => console.log(err))
  },[])
  const display_phones = phones.map(item => <h1> {item.name} </h1>)


  return(
  <div className="Phones">
      {display_phones}

    </div>
  
  )
}

Answer 1

因为您获得了一个包含一系列产品的对象，并且您已经必须对其进行映射。

{products: Array(4), total: 4, skip: 0, limit: 4}

尝试以下操作：

const display_phones = phones.products.map(item => <h1> {item.title} </h1>)

仅供参考您的对象没有名称之类的键

Answer 2

您将phones 的状态值初始化为一个空数组：

const [phones,setPhones] = useState([])

因此，在第一次渲染时，您可以成功 .map() 覆盖该数组。但稍后您更新该状态值：

setPhones(res.data)

显然，无论您将其更新为不是数组。那是什么？这是您为获取数据而访问的 URL：

https://dummyjson.com/products/search?q=phone

所以让我们在那里发出请求，看看它返回了什么......

{
   "products":[
      {
         "id":1,
         "title":"iPhone 9",
         "description":"An apple mobile which is nothing like apple",
         "price":549,
         "discountPercentage":12.96,
         "rating":4.69,
         "stock":94,
         "brand":"Apple",
         "category":"smartphones",
         "thumbnail":"https://dummyjson.com/image/i/products/1/thumbnail.jpg",
         "images":[
            "https://dummyjson.com/image/i/products/1/1.jpg",
            "https://dummyjson.com/image/i/products/1/2.jpg",
            "https://dummyjson.com/image/i/products/1/3.jpg",
            "https://dummyjson.com/image/i/products/1/4.jpg",
            "https://dummyjson.com/image/i/products/1/thumbnail.jpg"
         ]
      },
      {
         "id":2,
         "title":"iPhone X",
         "description":"SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...",
         "price":899,
         "discountPercentage":17.94,
         "rating":4.44,
         "stock":34,
         "brand":"Apple",
         "category":"smartphones",
         "thumbnail":"https://dummyjson.com/image/i/products/2/thumbnail.jpg",
         "images":[
            "https://dummyjson.com/image/i/products/2/1.jpg",
            "https://dummyjson.com/image/i/products/2/2.jpg",
            "https://dummyjson.com/image/i/products/2/3.jpg",
            "https://dummyjson.com/image/i/products/2/thumbnail.jpg"
         ]
      },
      {
         "id":71,
         "title":"Women Shoulder Bags",
         "description":"LouisWill Women Shoulder Bags Long Clutches Cross Body Bags Phone Bags PU Leather Hand Bags Large Capacity Card Holders Zipper Coin Purses Fashion Crossbody Bags for Girls Ladies",
         "price":46,
         "discountPercentage":14.65,
         "rating":4.71,
         "stock":17,
         "brand":"LouisWill",
         "category":"womens-bags",
         "thumbnail":"https://dummyjson.com/image/i/products/71/thumbnail.jpg",
         "images":[
            "https://dummyjson.com/image/i/products/71/1.jpg",
            "https://dummyjson.com/image/i/products/71/2.jpg",
            "https://dummyjson.com/image/i/products/71/3.webp",
            "https://dummyjson.com/image/i/products/71/thumbnail.jpg"
         ]
      },
      {
         "id":86,
         "title":"Bluetooth Aux",
         "description":"Bluetooth Aux Bluetooth Car Aux Car Bluetooth Transmitter Aux Audio Receiver Handfree Car Bluetooth Music Receiver Universal 3.5mm Streaming A2DP Wireless Auto AUX Audio Adapter With Mic For Phone MP3",
         "price":25,
         "discountPercentage":10.56,
         "rating":4.57,
         "stock":22,
         "brand":"Car Aux",
         "category":"automotive",
         "thumbnail":"https://dummyjson.com/image/i/products/86/thumbnail.jpg",
         "images":[
            "https://dummyjson.com/image/i/products/86/1.jpg",
            "https://dummyjson.com/image/i/products/86/2.webp",
            "https://dummyjson.com/image/i/products/86/3.jpg",
            "https://dummyjson.com/image/i/products/86/4.jpg",
            "https://dummyjson.com/image/i/products/86/thumbnail.jpg"
         ]
      }
   ],
   "total":4,
   "skip":0,
   "limit":4
}

如果那是响应的内容（在您的代码中是 res），那么您期望 res.data 是什么，为什么？

如果错误告诉您phones 是undefined，然后我们可以得出结论res 可能是整个对象，data 不是该对象的属性，因此您将状态设置为undefined .但该错误明确告诉我们 .map() 不是函数。这意味着res.data是某物，并且可能是一个对象。

res.data 似乎就是整个对象。所以你可能正在寻找这个对象的 products 属性：

setPhones(res.data.products)