我现在遇到了一个关于此代码的问题。我认为问题出在我的useEffect钩子中，钩子带有“{ id：'' }"。当我从www.example.com客户端console.log此数据时sanity.io，数据显示为空。我的“{ id：“}”应引用“_id == $id中的$id。当我在测试环境中使用groq查询时，它将工作。但它不会将数据console.log到页面。

import { View, Text, ScrollView } from 'react-native'
import React, { useEffect, useState } from 'react'
import { ArrowRightIcon } from 'react-native-heroicons/outline'
import ResturauntCard from './ResturauntCard'
import sanityClient from '../sanity'

const FeaturedRow = ({ title, description, id }) => {
    const [restaurants, setResturants] = useState([]);

    useEffect(() => {
        sanityClient.fetch(`
        *[_type == "featured" && _id == $id ] {
            ...,
           restaurants[]->{
             ...,
             dishes[]->,
             type-> {
                 name
             }
           },
         }[0]
        `,
            { id: '' }
        ).then((data) => {
            console.log(data)
            setResturants(data?.restaurants)
        })
    }, []);

    return (
        <View>
            <View className="mt-4 flex-row items-center justify-between px-4" >
                <Text className="font-bold text-lg" >{title}</Text>
                <ArrowRightIcon color="#00CCBB" />
            </View>
            <Text className="text-xs text-gray-500 px-4" >{description}</Text>

            <ScrollView
                horizontal
                contentContainerStyle={{
                    paddingHorizontal: 15,
                }}
                showsHorizontalScrollIndicator={false}
                className="pt-4"
            >

                {
                    restaurants?.map((restaurant => {
                        <ResturauntCard
                            key={restaurant._id}
                            id={restaurant.id}
                            imgUrl={restaurant.image}
                            address={restaurant.address}
                            title={restaurant.name}
                            dishes={restaurant.dishes}
                            rating={restaurant.rating}
                            genre={restaurant.type?.name}
                            short_description={restaurant.short_description}
                            long={restaurant.long}
                            lat={restaurant.lat}
                        />
                    }))
                }

            </ScrollView>
        </View>
    )
}

export default FeaturedRow

我的应用程序的不同部分的这段代码确实工作并拉取数据。

import { View, Text, SafeAreaView, Image, TextInput, ScrollView } from 'react-native'
import React, { useLayoutEffect, useState, useEffect } from 'react'
import { useNavigation } from "@react-navigation/native"
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsVerticalIcon, } from 'react-native-heroicons/outline'
import Categories from '../components/Categories'
import FeaturedRow from '../components/FeaturedRow'
import sanityClient from '../sanity'


const HomeScreen = () => {
    useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: false,
        })
    }, [])

    const navigation = useNavigation();
    const [featuredCategories, setFeaturedCategories] = useState()

    useEffect(() => {
        sanityClient.
            fetch(
                ` *[_type == "featured"  ]{
                    ...,
                   restaurants[]->{
                     ...,
                     dishes[]->,
                     type-> {
                        ...,
                     }
                   }, 
                 } `).then((data) => {
                    setFeaturedCategories(data)
                })
    }, [])

    console.log(featuredCategories)

    return (
        <SafeAreaView className="bg-white pt-5" >

            {/* Header */}

            <View className="flex-row pb-3 items-center mx-4 space-x-2" >
                <Image
                    source={{
                        uri: 'https://links.papareact.com/wru'
                    }}
                    className="h-7 w-7 bg-gray-300 rounded-full"
                />

                <View className="flex-1" >
                    <Text className="font-bold text-grey-400 text-xs" >Deliver Now!</Text>
                    <Text
                        className="font-bold text-xl">Current Location
                        <ChevronDownIcon size={20} color="#00CCBB" />
                    </Text>
                </View>
                <UserIcon size={35} color='#00CCBB' />

            </View>

            {/* Search Bar */}

            <View className="flex-row items-center space-x-2 pb-2 mx-4 " >
                <View className="flex-row flex-1 space-x-2 bg-gray-200 p-3" >
                    <MagnifyingGlassIcon color='#00CCBB' />
                    <TextInput
                        placeholder='Resturants and Cuisines'
                        keyboardType='default'
                    />
                </View>
                <AdjustmentsVerticalIcon color='#00CCBB' />
            </View>

            <ScrollView
                contentContainerStyle={{
                    paddingBottom: 100,
                }} >

                {/* Categories */}

                <Categories />

                {/* Featured */}

                {featuredCategories?.map((category) => (
                    <FeaturedRow
                        key={category._id}
                        id={category.id}
                        title={category.name}
                        description={category.short_description}
                    />
                ))}
            </ScrollView>
        </SafeAreaView>
    )
}

export default HomeScreen

这段代码将正确Map到我的应用程序的另一部分。
感谢您查看我的代码。