如何在Sanity中仅获取指定单选值的文档？

方法一：在GROQ查询阶段过滤（推荐） #

直接在Sanity的数据请求中添加过滤条件，只获取exhibition_status为current的文档，这种方式能减少前端接收的数据量，提升性能。

修改你的useEffect中的查询语句：

useEffect(() => {
    sanityClient.fetch(
        `*[_type=="exhibitions" && exhibition_status == "current"]{
            exhibition_name,
            exhibition_image{
                asset->{
                    _id,
                    url
                }
            },
            exhibition_status
        }`)
        .then((data) => setExhibitionData(data))
        .catch(err => console.error(err));
}, [] );

方法二：在React前端过滤 #

如果需要保留所有展览数据（比如切换过往/当前/未来标签时无需重新请求），可以在获取全量数据后，在前端做过滤：

方式1：渲染时直接过滤 #

修改渲染列表的代码，先过滤出状态为current的项再遍历：

{exhibitionData && exhibitionData
    .filter(item => item.exhibition_status === 'current')
    .map((exhibition, index) => (
        <div className="ex-current" key={index}>
            <h3>{exhibition.exhibition_name}</h3>
            <img src={urlFor(exhibition.exhibition_image).url()} alt={exhibition.exhibition_name} />
        </div>   
    ))}

方式2：用useMemo缓存过滤结果（优化性能） #

如果数据量较大，用useMemo缓存过滤后的结果，避免每次渲染重复计算：

import { useState, useEffect, useMemo} from 'react'

// ... 其他代码不变

const currentExhibitions = useMemo(() => {
    return exhibitionData?.filter(item => item.exhibition_status === 'current') || [];
}, [exhibitionData]);

// 渲染时直接使用缓存后的结果
return (
    // ... 其他结构不变
    {currentExhibitions.map((exhibition, index) => (
        <div className="ex-current" key={index}>
            <h3>{exhibition.exhibition_name}</h3>
            <img src={urlFor(exhibition.exhibition_image).url()} alt={exhibition.exhibition_name} />
        </div>   
    ))}
)

注意：你的代码中图片alt属性使用了exhibition_alt，但Sanity schema里没有定义这个字段，建议要么在schema中添加exhibition_alt字段，要么替换为已有的exhibition_name

内容的提问来源于stack exchange，提问作者paparonnie