如何从SanityClient的阵列(图像阵列中的第一个图像)中提取项目

Question

我有一组集合，我想在我的网页上显示每个集合的图像，用户可以将其用作各自画廊的链接。所以我想从一组图像中提取一个项目(图像(。我没有为每个类别挑选一个特定的图像，所以我只会在它的图像数组中获得第一个要使用的图像。我收到这个错误：description: "expected '}' following object body"

import React, { useState, useEffect } from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer } from '../components';
import Link from 'next/link';
const gallery = () => {
const [ galleryData, setGalleryData ] = useState(null);
useEffect(() => {
client.fetch(
`*[_type == 'set']{
set_name,
set_images[]->{
image{->asset{
_id,
url
}}
}
}`
).then((data) => setGalleryData(data))
.catch(err => console.error(err))
})
return (
<div>
<Header />
<main className="main-gallery"> 
<div className="title">
<div className="title-line-left"></div>
<h2>gallery</h2> 
<div className="title-line-right"></div>
</div>
<div className="categories">
<ul className="categories-container">
{galleryData && galleryData.map((set, index) => (
<li key={index}>
<Link href="/sets"><img src={urlFor(set.set_images.image[0]).auto('format').url()} alt={set.set_name}/></Link>
</li>
))}
</ul>
</div>
</main>
<Footer />
</div>
)
}

这是我的理智模式：

export default {
name: 'set',
type: 'document',
title: 'Set',
fields: [
{
name: 'set_name',
type: 'string',
title: 'Set Name',
},
{
name: 'set_images',
type: 'array',
title: 'Set Images',
of: [
{
name: 'image',
type: 'image',
title: 'Image',
options: {
hotspot: true,
},
fields: [
{
name: 'alt',
type: 'string',
title: 'Alternative Text',
options: {
isHighlighted: true
}
},
{
name: 'name',
type: 'string',
title: 'Name',
options: {
isHighlighted: true
}
},
{
name: 'date',
type: 'string',
title: 'Date',
options: {
isHighlighted: true
}
},
{
name: 'size',
type: 'string',
title: 'Size',
options: {
isHighlighted: true
}
},
{
name: 'materials',
type: 'string',
title: 'Materials',
options: {
isHighlighted: true
}
},
]
},
]
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'set_name'
}
}
]
}

Answer 1

这修复了它：

useEffect(() => {
client.fetch(
`*[_type == 'set']{
set_name,
'setSelect' : set_images[0].asset->{_id,url}}`
).then((data) => setGalleryData(data))
.catch(err => console.error(err))
})

然后｛set.setSelect｝