时间戳

首页 > 解决方案 > 反应：元素类型无效：需要一个字符串（对于内置组件）

javascript - 反应：元素类型无效：需要一个字符串（对于内置组件）

问题描述

我正在用 React 和 Sanity 构建一个博客，到目前为止一切都很好，但是现在当我尝试为每个博客添加 SinglePost 页面时，代码很好，但是当我转到帖子并单击时，我被重定向到 SinglePost 页面并得到了这个错误。

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查SinglePost. ▶ 22 个堆栈帧被折叠。（匿名函数）src/components/SinglePost.js:31

错误我得到 https://i.stack.imgur.com/qfEF4.jpg

我的单个帖子组件看起来像这样

import React , { useState, useEffect }from "react";
import { useParams } from 'react-router-dom'
import sanityClient from "../client.js"
import imageUrlBuilder from "@sanity/image-url";
import { BlockContent } from "@sanity/block-content-to-react"

const builder = imageUrlBuilder(sanityClient);
function urlFor(source) {
    return builder.image(source)
}
export default function SinglePost() {
    const [singlePost, setSinglePost] = useState(null);
    const { slug } = useParams();

    useEffect(() => {
        sanityClient.fetch(`*[slug.current == "${slug}"] {
            title,
            _id,
            slug,
            mainImage{
                asset->{
                    _id,
                    url
                }
            },
            body,
            "name": author->name,
            "authorImage": author->image
        }`)
        .then((data) => setSinglePost(data[0]))
        .catch(console.error);
    }, [slug]);

    if (!singlePost) return <div>Loading....</div>
    
    return (
        <main className="bg-gray-200 min-h-screen p-12">
            <article className="container shadow-lg mx-auto bg-green-100 rounded-lg">
                <header className="relative">
                    <div className="absolute h-full w-full flex items-center justify-center p-8">
                        <div className="bg-white bg-opacity-75 rounded p-12">
                            <h1 className="cursive text-3xl lg:text-6xl mb-4">
                                {singlePost.title}
                            </h1>
                            <div className="flex justify-center text-gray-800">
                                <img src={urlFor(singlePost.authorImage).url()} 
                                alt={singlePost.name}
                                className="w-10 h-10 rounded-full"
                                />
                                <p className="cursive flex items-center pl-2 text-2xl">
                                    {singlePost.name}
                                </p>
                            </div>
                        </div>
                    </div>
                    <img src={singlePost.mainImage.asset.url}
                    alt={singlePost.title}
                    className="w-full object-cover rounded-t"
                    style={{height: "400px"}}
                    />
                </header>
                <div className="px-16 lg:px-48 py-12 lg:py-20 prose lg:prose-xl max-w-full">
                    <BlockContent blocks={singlePost.body} projectId="abmvfbq5" dataset="production"/>
                    </div>
            </article>
        </main>
    )
}

我现在没有发现代码有任何问题，任何人都可以通过查看错误来帮助我并告诉我有什么问题吗？谢谢

标签： javascriptreactjsreact-reduxreact-hookssanity

解决方案

我在代码中看到两件事暗示了一个问题。没有看到你client.js很难说。

   useEffect(() => {
// string interpolation for ${slug} needs to be surrounded by ticks and not double string quotations
        sanityClient.fetch(`*[slug.current == "${slug}"] {
            title,
            _id,
            slug,
            mainImage{
                asset->{
                    _id,
                    url
                }
            },
            body,
            "name": author->name,
            "authorImage": author->image
        }`) <----- did you mean to send an entire function as an argument?
        .then((data) => setSinglePost(data[0]))
        .catch(console.error);
    }, [slug]);

推荐阅读