未捕获的 TypeError: (0 , _sanity_client__WEBPACK_IMPORTED_MODULE_0__.sanityClient) 不是函数

IT技术 reactjs sanity
2022-07-24 01:05:54

我第一次尝试将数据从 Sanity 提取到我的react应用程序中。目前,我正在尝试一些小的东西,所以我有一个名为 的模式website_images,它有一个名为的图像类型about和一个单独的字符串alt

在我正在观看的教程视频中,她说她正在使用 GROQ 来执行此操作。我收到此错误消息:

Uncaught TypeError: (0 , _sanity_client__WEBPACK_IMPORTED_MODULE_0__.sanityClient) is not a function

我也按照她的指示使用了 sanityClient,但视频是 2020 年的,所以我不确定某些内容是否过时或者我做错了什么?

这是错误消息提到的我的client.js:

import { sanityClient } from "@sanity/client";

export default sanityClient({
    projectId: "55oqiw61",
    dataset: "production"
})

还有我试图获取数据的 about.js 文件:

import React, { useState, useEffect }from 'react';
import './about.css'
import sanityClient from '../client'

export default function About() {

    const [aboutData, setAbout] = useState(null);

    useEffect(() => {
        sanityClient
            .fetch(`*[_type=="website_images"]{
                alt,
                about{
                    asset->{
                        _id,
                        url
                    }
                }
            }`)
            .then((data) => setAbout(data))
            .catch(console.error);
    }, [] );

    return (
        <main className="main-about">
            <div className="about-body">
                <div className="about-title">
                    <div className="title-line-left"></div>
                    <h2>about</h2>
                    <div className="title-line-right"></div>
                </div>
                <div className="about-text">
                    <p className="pronouns">(they/them)</p>
                    <p>The Japanese city and the Prefecture of Hiroshima may have been devastated by the atomic bomb over 76 years ago, but today, this site of the destruction is one of the top tourist destinations in the entire country. Statistics released by the nation's tourist agency revealed that around 363,000 visitors went to the metropolis during 2012, with Americans making up the vast majority of that figure, followed by Australians and Chinese.</p>
                </div>
            </div>
            {aboutData && aboutData.map((website_images, index) => (
            <figure className="photo-position">
                    <img src="{website_images.about.asset.url" alt="website_images.alt" className="about-photo"></img>
            </figure>
            ))}
        </main>
    )
}

注意事项:我还没有运行 npm deploy sanity,不确定什么时候应该运行。另外,我尝试使用 imageUrlBuilder 方法,并得到了相同的错误消息,所以我认为问题出在我的 client.js 文件上?

0个回答
没有发现任何回复~