问(反应本机)传递道具与地图函数未定义不是一个函数(接近‘...resturants.map.’)

EN

{resturants?.map((type) => {
      return (
        <ResturantCard
          key={type._id}
          id={type._id}
          imgUrl="https://links.papareact.com/gn7"
          title={type.name}
          genre={type.genre}
          address={type._address}
          description={type.description}
          lat={type.lat}
          long={type.long}
          dishes={type.dishes}
        />
      );
    })}

import { View, Text, ScrollView } from "react-native";
import { React, useEffect, useState } from "react";
import { ArrowRightIcon } from "react-native-heroicons/outline";
import ResturantCard from "./ResturantCard";
import client from "../sanity";

export default function FeaturedRow(props) {
  const [resturants, setResturants] = useState([]);
  useEffect(() => {
    console.log(props.id);
    client
      .fetch(
        `*[_type == "featured" && _id== $id ]{...,type[]->{
          ...,dishes[]->, type->{name}      
          },
        }[0]`,
        { id: props.id }
      )
      .then((data) => setResturants(data), console.log("date recieved"))
      .catch(console.log("No data received"));
  }, []);

  console.log(resturants);

  //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*/}
        {resturants?.map((type) => {
          return (
            <ResturantCard
              key={type._id}
              id={type._id}
              imgUrl="https://links.papareact.com/gn7"
              title={type.name}
              genre={type.genre}
              address={type._address}
              description={type.description}
              lat={type.lat}
              long={type.long}
              dishes={type.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={[]}
        />
        <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>
  );
}

import { View, Text, TouchableOpacity, Image } from "react-native";
import React from "react";
import { MapPinIcon, StarIcon } from "react-native-heroicons/outline";

export default function ResturantCard(props) {
  return (
    <TouchableOpacity className="bg-white shadow mr-4">
      <Image source={{ uri: props.imgUrl }} className="h-36 w-64" />
      <View className="px-3 pb-3">
        <Text className="text-lg font-bold pt-2">{props.title}</Text>
        <View className="flex-row items-center space-x-1">
          <StarIcon color="green" size={22} opacity={0.5} />
          <Text>
            {props.rating} . {props.genre}
          </Text>
        </View>
        <View className="flex-row items-center space-x-1">
          <MapPinIcon />
          <Text className="text-xs text-gray-500">Near . {props.address}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}