ReactJS中调用phones.map报错：phones.map is not a function

问题出在你对接口返回数据的处理上。调用https://dummyjson.com/products/search?q=phone接口后，返回的res.data是一个包含products数组的对象，而非直接的数组。你把整个对象赋值给了phones，导致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 => {      
        // 取res.data里的products数组赋值给phones
        setPhones(res.data.products)      
      }).catch(err => console.log(err))
  },[])

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

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

额外注意两点：

• 调用接口前，通过浏览器开发者工具查看返回的数据结构，确保取到正确的数组字段
• 保持phones的状态始终为数组类型，避免后续渲染时出现类型错误

内容的提问来源于stack exchange，提问作者lb2020