问题描述
我在呈现从 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。