当对data变量使用.map方法时，我得到错误：
“未捕获的TypeError：无法读取未定义的属性（阅读”map“）"。
据我所知，出于某种原因，.json文件中的数据被作为对象而不是数组传递。

我的函数文件

import React from 'react'
import SearchBar from '../../components/SearchBar/SearchBar'
import './Properties.css'
import useProperties from '../../hooks/useProperties'
import { PuffLoader } from 'react-spinners'
import PropertyCard from '../../components/PropertyCard/PropertyCard'

const Properties = () => {
  const { data, isError, isLoading } = useProperties()
  if (isError) {
    return (
      <div className="wrapper">
        <span>Error while fetching data</span>
      </div>
    )
  }

  if (isLoading) {
    return (
      <div className="wrapper flexCenter" style={{ height: "60vh" }}>
        <PuffLoader height="80" width="80" radius={1} color='#4066ff' aria-label='puff-loading' />
      </div>
    )
  }
  return (
    <div className="wrapper">
      <div className="flexColCenter paddings innerWidth properties-container">
        <SearchBar />
        <div className="paddings flexCenter properties">
          {

            data.map((card, i) => (<PropertyCard card={card} key={i} />))

          }
        </div>
      </div>
    </div>
  )
}

export default Properties

字符串

示例my .json文件

[
  {
    "_id": { "$oid": "64392d39dfd90fb29e464fb7" },
    "title": "Sunny Meadow Cottage",
    "description": "Massive opportunity to build your dream home at the base of Mummy Mountain in the 3 C's school district. Home is currently updated and very livable if your plans are to build at a later date.* Bonus * to live hillside without hillside restrictions in the town of PV. Run don't walk to capture this needle in a hay stack.",
    "price": 6000,
    "address": "Street 1",
    "city": "Chicago",
    "country": "US",
    "image": "https://images.pexels.com/photos/7031406/pexels-photo-7031406.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    "userEmail": "[email protected]",
    "createdAt": { "$date": "2023-04-14T10:38:48.762Z" },
    "updatedAt": { "$date": "2023-04-14T10:38:48.762Z" },
    "facilities": { "bathrooms": "2", "parking": "1", "bedrooms": "5" }
  },
  {
    "_id": { "$oid": "64392e0bdfd90fb29e464fbc" },
    "title": "Coastal Breeze Villa",
    "description": "Massive opportunity to build your dream home at the base of Mummy Mountain in the 3 C's school district. Home is currently updated and very livable if your plans are to build at a later date.* Bonus * to live hillside without hillside restrictions in the town of PV. Run don't walk to capture this needle in a hay stack.",
    "price": 8000,
    "address": "Street 2",
    "city": "Multan",
    "country": "Pakistan",
    "image": "https://3.bp.blogspot.com/-84l-BoUL090/VTDHcQzSTNI/AAAAAAAAuHI/Khftta_CF5E/s1920/wow-home-design.jpg",
    "facilities": { "bathrooms": "5", "parking": "1", "bedrooms": "4" },
    "userEmail": "[email protected]",
    "createdAt": { "$date": "2023-04-14T10:42:19.231Z" },
    "updatedAt": { "$date": "2023-04-14T10:42:19.231Z" }
  },
  {
    "_id": { "$oid": "6439001c74446601d6fce96d" },
    "title": "Citralan Puri Serang",
    "description": "Massive opportunity to build your dream home at the base of Mummy Mountain in the 3 C's school district. Home is currently updated and very livable if your plans are to build at a later date.* Bonus * to live hillside without hillside restrictions in the town of PV. Run don't walk to capture this needle in a hay stack.",
    "price": 3000,
    "address": "Street 3",
    "city": "California",
    "country": "US",
    "image": "https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    "userEmail": "[email protected]",
    "createdAt": { "$date": "2023-04-14T07:26:20.051Z" },
    "updatedAt": { "$date": "2023-04-14T07:26:20.051Z" },
    "facilities": { "bathrooms": "3", "parking": "1", "bedrooms": "2" }
  }
]

型
我添加了一个检查，看看我的日期是否是一个数组：

<div className="paddings flexCenter properties">
        {
        data && Array.isArray(data) ? (
          data.map((card, i) => (<PropertyCard card={card} key={i} />))
        ) : (
          <p>No data available</p>
        )
      }
        </div>

型

useProperties

import React from 'react'
import { useQuery } from 'react-query'
import { getAllProperties } from '../utils/api'

const useProperties = () => {

    const { data, isLoading, isError, refetch } = useQuery(
        "allProperties", getAllProperties, { refetchOnWindowFocus: false }
    )

    return (
        data, isError, isLoading, refetch
    )
}

export default useProperties

型
答案很明显：