我现在遇到了一个关于此代码的问题。我认为问题出在我的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到我的应用程序的另一部分。
感谢您查看我的代码。
1条答案
按热度按时间qnakjoqk1#
导入React,{ useEffect,useState }从'react'导入{ ArrowRightIcon }从'react-native-hericons/outline'导入ResturauntCard从'./ResturauntCard'导入sanityClient从'../sanity'
const特征行=({标题,描述,id })=〉{ const [餐馆,集合餐馆] =使用状态([]);
}
导出默认FeaturedRow
块引号