(React Native)Props Not passing to Child Component(数据检索自Sani

Question

我正试图将道具从主屏幕传递到子组件，但它不起作用。不渲染特征行。一旦我把一些字符串作为道具或变量传递给特色行，它就可以正常工作了。但当我使用地图功能时，道具不会被传递。数据正在从健全CMS中读取，我可以看到从console.log中提取的数据。我可以在控制台中打印完整的对象以及我需要传递的一些元素。

我想问题就在这里。

{featuredCategories.map((category) => {
<FeaturedRow
key={category._id}
title={category.name}
description={category.description}
id={category._id}
/>;
console.log(category.name);
console.log(category.description);
})}

父屏幕的完整代码如下

import {
View,
Text,
SafeAreaView,
Image,
TextInput,
ScrollView,
} from "react-native";
import { React, useEffect, useLayoutEffect, useState } from "react";
import { useNavigation } from "@react-navigation/native";
import {
ChevronDownIcon,
UserIcon,
MagnifyingGlassIcon,
AdjustmentsVerticalIcon,
} from "react-native-heroicons/outline";
import Categories from "../components/Categories";
import FeaturedRow from "../components/FeaturedRow";
import client from "../sanity";
const testTitle = "testing";
export default function HomeScreen() {
const [featuredCategories, setFeaturedCategories] = useState([]);
const navigation = useNavigation();
{
useEffect(() => {
client
.fetch(
`*[_type == "featured"]{...,type[]->{
...,dishes[]->      
},
}`
)
.then((data) => setFeaturedCategories(data))
.catch(console.log("No data received"));
}, []);
console.log(featuredCategories);
}
useLayoutEffect(() => {
navigation.setOptions({ headerShown: false });
});
return (
<SafeAreaView className="bg-white pt-5">
{/*header*/}
<View className="flex-row pb-3 mx-3 space-x-2 px-4">
<Image
source={{ uri: "https://links.papareact.com/wru" }}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View className="flex-1">
<Text className="font-bold text-gray-400 text-xs ">Delieveroo</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 p-2 space-x-2 pb-2 mx-4 items-center">
<View className="flex-row space-x-2 flex-1 bg-gray-200 p-3 ">
<MagnifyingGlassIcon color="grey" size={20} />
<TextInput
placeholder="Resturants and Cousines"
keyboardType="default"
/>
</View>
<View>
<AdjustmentsVerticalIcon />
</View>
</View>
<ScrollView className="bg-white flex-1">
<Categories />
{featuredCategories.map((category) => {
<FeaturedRow
key={category._id}
title={category.name}
description={category.description}
id={category._id}
/>;
console.log(category.name);
console.log(category.description);
})}
<FeaturedRow title="1st Row" description="Best in Town Today" id="c1" />
<FeaturedRow
title="Tasty Discounts"
description="Best on Budget"
id="c2"
/>
<FeaturedRow
title="Offers Near You"
description="Partners Discounts"
id="c3"
/>
</ScrollView>
</SafeAreaView>
);
}

鉴于功能当前代码在此处

import { View, Text, ScrollView } from "react-native";
import React from "react";
import { ArrowRightIcon } from "react-native-heroicons/outline";
import ResturantCard from "./ResturantCard";
export default function FeaturedRow({ props }) {
//console.log(props);
return (
<View>
<View className="flex-row mt-4 items-center justify-between px-4">
<Text className="font-bold text-lg">{props.title}</Text>
<ArrowRightIcon />
</View>
<Text className="text-xs px-4 text-gray-500">{props.description}</Text>
<ScrollView
horizontal
contentContainerStyle={{
paddingHorizontal: 15,
paddingBottom: 15,
}}
className="pt-4 pb-2"
>
{/* Resturant Card*/}
<ResturantCard
id="d1"
imgUrl="https://links.papareact.com/gn7"
title="Ramzan Shinwari"
genre="Dessi Food"
address="123 Chaklala"
description="The Best Food in the Town"
lat="121343"
long="453233"
dishes={[]}
/>
<ResturantCard
id="d1"
imgUrl="https://links.papareact.com/gn7"
title="Ramzan Shinwari"
genre="Dessi Food"
address="123 Chaklala"
description="The Best Food in the Town"
lat="121343"
long="453233"
dishes={[]}
/>
<ResturantCard
id="d1"
imgUrl="https://links.papareact.com/gn7"
title="Ramzan Shinwari"
genre="Dessi Food"
address="123 Chaklala"
description="The Best Food in the Town"
lat="121343"
long="453233"
dishes={[]}
/>
</ScrollView>
</View>
);
}

输出

输出图片

Answer 1

您需要返回组件：

{featuredCategories.map((category) => {
return (
<FeaturedRow
key={category._id}
title={category.name}
description={category.description}
id={category._id}
/>
);
})}