通过地图渲染数据 - 无法读取属性

如何解决通过地图渲染数据 - 无法读取属性

我在呈现从 API 获取的一组数据时遇到问题，我想知道这是为什么。如果我注释掉我的 map 函数，我就可以 console.log 我的数据对象并通过开发工具遍历它。但是，一旦我将 map 函数重新实现到我的代码中，我就会不断收到“无法找到评论属性”的类型错误。那个怎么样？考虑到我能够更早地控制台记录对象？

index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Header from '../components/Header'
import {useQuery,gql} from '@apollo/client'

const REVIEWS = gql`

  query GetReviews {
    reviews {
      title,body,rating,id
    }
  }

`
export default function Home() {


  const {loading,error,data} = useQuery(REVIEWS)

  console.log(data.reviews)

  return (
    
    <>
    <Header/>

    <div>{data.reviews.map(r => (
      <div>{r.id}</div>
    ))} 
    </div>

    </>
  )
}

_app.js

import '../styles/globals.css'
import {
  ApolloClient,InMemoryCache,ApolloProvider,} from "@apollo/client";




function MyApp({ Component,pageProps }) {


 const client = new ApolloClient({
   uri: 'http://localhost:1337/graphql',cache: new InMemoryCache()

 })


  return (

        <ApolloProvider client={client}>
          <Component {...pageProps} />
        </ApolloProvider>
  
  )
}
export default MyApp

解决方法

请确保您始终使用条件来检查数据是否存在，然后再开始在获取数据的情况下对其进行映射。

在您的示例中，一个简单的解决方案是：

return (
  <>
    <Header />

    <div>
      {data?.reviews.length ? data.reviews.map((r) => <div>{r.id}</div>) : null}
    </div>
  </>
);

我所做的是检查 data.reviews 是否未定义，以及它是否具有正长度 ( > 0 )，这是能够对其进行映射的要求。如果不满足此要求，则返回 null。