数据映射功能在 Reactjs 中不起作用答案

【问题标题】：Data map function is not working in Reactjs数据映射功能在 Reactjs 中不起作用
【发布时间】：2023-01-29 01:26:10
【问题描述】：

我正在使用 Reactjs 并使用 nextjs 框架，现在我正在尝试使用 map 函数获取数据（url 是 - https://dummyjson.com/products），但出现以下错误

TypeError: Cannot read property 'length' of undefined

这是我当前的代码

import { useEffect, useState } from "react"
export default function Test() {
  const [data, setData] = useState<any>();
  useEffect(() => {
    const callData = async () => {
      const data = await fetch('https://dummyjson.com/products').then(data => data.json())
      console.log(data);
      setData(data)
    }
    callData()
  }, [])

  return(
    <div>
    {
     data.length ? data.map(({}) => <p key={data.id}>{data.title}</p>) : <h3>There are no records yet</h3>
    }
    </div>)

}

【问题讨论】：

错误消息中有什么不清楚的地方？至少数据的初始值是未定义的，它确实没有长度（或任何其他）属性。
data.products.length？ data 是对象，不是数组。而且你的地图也没有传递任何数据，应该是data.products.map((product) => ....)

标签： javascript reactjs next.js

【解决方案1】：

尝试用空数组初始化 data 状态：

const [data, setData] = useState&lt;any&gt;([]);

你也应该改变

data.map(({}) =&gt; &lt;p key={data.id}&gt;{data.title}&lt;/p&gt;)

到

data?.map(({id,title}) =&gt; &lt;p key={id}&gt;{title}&lt;/p&gt;)

【讨论】：

【解决方案2】：

尝试这个

{ 数据长度？ data.map(({title, id}) => {title}

）：

暂无记录

}

【讨论】：