我得到以下错误:对象是无效的一个React子(发现:对象与键{图像，名称})。如果您打算呈现子元素的集合，请使用数组。
我没有得到我错过的东西。
下面的代码可以正常工作:
interface Props {
posts: [Post]
}
const Home: NextPage<Props> = ({ posts }) => {
return (
<div className="mx-auto max-w-7xl">
<Head>
<title>Medium Blog</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<div className="flex items-center justify-between border-y border-black bg-yellow-400 py-10 lg:py-0">
<div className="space-y-5 px-10">
<h1 className="max-w-xl font-serif text-6xl">
<span className="underline decoration-black decoration-4">
Medium
</span>{' '}
is aplace to write, read, and connect
</h1>
<h2>
It's easy and free to post your thinking on any topic and connect
with millions of readers
</h2>
</div>
<img
className="hidden h-32 md:inline-flex lg:h-full"
src="http://accountabilitylab.org/wp-content/uploads/2020/03/Medium-logo.png"
alt=""
/>
</div>
{/* Posts */}
{posts.map((post) => (
<Link key={post._id} href={`/post/${post.slug.current}`}>
<div>
<img src={urlFor(post.mainImage).url()!} alt="" />
<div>
<div>
<p>Test 1</p>
<p>
Test 2 by Test 3
</p>
</div>
</div>
</div>
</Link>
))}
</div>
)
}
如果我改变有"Test 1"测试2";"测试3";对于下面的代码，它不再工作，我得到错误:
{/* Posts */}
{posts.map((post) => (
<Link key={post._id} href={`/post/${post.slug.current}`}>
<div>
<img src={urlFor(post.mainImage).url()!} alt="" />
<div>
<div>
<p>{post._title}</p>
<p>
{post.description} by {post.author}
</p>
</div>
</div>
</div>
</Link>
))}
我从typing .ts导出的接口:
export interface Post {
_id: string
_createdAt: string
_title: string
author: {
name: string
image: string
}
description: string
mainImage: {
asset: {
url: string
}
}
slug: {
current: string
}
body: [object]
}
我读了很多关于这个问题的文章。
由于某些原因，我不得不插入{post.author.name}
Thank you CRice