reactjs Js & Sanity -无法读取undefined的属性(阅读'map')

tcomlyy6 于 2023-03-22 发布在 React

关注(0)|答案(1)|浏览(155)

我已经使用sanity有一段时间了，我已经检查了查询，当与useState和useEffect一起使用时，它在React应用程序上工作得很好。
我最近迁移到了Nextjs 13，使用getStaticProps查询可以工作，但只在页面部分。
我已经检查了sanity groq查询，它正在工作。
当我想使用一些组件时，每当我尝试运行相同的......我得到“TypeError：无法读取未定义的属性（正在阅读'map'）".
文件夹结构
前端

component / about / about.jsx
页数
jsx ---这里我想导入组件。
代码.. AboutCheck

import groq from "groq";
import createClient from "../client";

const AboutCheck = ({ HeroSection }) => {
  return (
    <div>
      {HeroSection.map((item) => (
        <li>{item.heroheading}</li>
      ))}
    </div>
  );
};

export async function getStaticProps() {
  const query = `*[_type == "HeroSection"]{
  heroheading,
  herosubheading,
  ctaButtonText,
coverImage {
    asset -> {
      url
    }
  }
}`;
  const HeroSection = await createClient.fetch(query);
  return {
    props: {
      HeroSection,
    },
  };
}

export default AboutCheck;

索引

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import AboutCheck from '@/component/AboutCheck'

errorconst inter = Inter({ subsets: ['latin'] })

function Home() {

  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
          <p>
            Hey 
          </p>
    <AboutCheck   />
       </>

  
  )
}
export default  Home;

enter image description here
我最近迁移到了Nextjs 13，使用getStaticProps查询可以工作，但只在页面部分。
我已经检查了sanity groq查询，它正在工作。
当我想使用一些组件时，每当我尝试运行相同的......我得到“TypeError：无法读取未定义的属性（正在阅读'map'）".

reactjs

来源：https://stackoverflow.com/questions/75806148/next-js-sanity-cannot-read-properties-of-undefined-reading-map

1条答案

按热度按时间

vltsax251#

你不能在常规组件中使用Nextjs数据获取方法，它应该在pages文件夹下的页面组件中使用。
因此，您必须在这里删除AboutCheck中的getStaticProps，并使其在Home中发生，以便能够在那里获取数据，然后将其传递给AboutCheck

function Home({ HeroSection }) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <p>Hey</p>
      <AboutCheck HeroSection={HeroSection} />
    </>
  );
}
export default Home;

export async function getStaticProps() {
  const query = `*[_type == "HeroSection"]{
    heroheading,
    herosubheading,
    ctaButtonText,
  coverImage {
      asset -> {
        url
      }
    }
  }`;
  const HeroSection = await createClient.fetch(query);
  return {
    props: {
      HeroSection,
    },
  };
}

赞(0）回复(0）举报 2023-03-22

我来回答

reactjs Js & Sanity -无法读取undefined的属性(阅读'map')

1条答案

相关问题

热门标签

最新问答