我无法将数据提取到 AWS Amplify 数据库中

Question

我使用 react-native 和 AWS Amplify 创建了一个移动应用程序，我使用 React-Native 成功完成了我的应用程序的 UI 设计，我使用 AWS Amplify 完成了我的应用程序身份验证功能，但是问题是我要获取我的应用程序主屏幕的数据来自数据库，但我无法在我的应用程序中获取数据，我尝试了很多次来解决不同的问题，但我无法解决，所以请为此提供完美的解决方案。

主屏幕

import { StyleSheet,View, FlatList, Text } from 'react-native';
import RestaurantItem from '../../components/ResaurantItem';
import { DataStore } from "aws-amplify";
import { Restaurant } from "../../models";
import { useState, useEffect } from "react";
import { restaurants } from '../../../assets/data/restaurants.json';



export default function HomeScreen() {

    const [restaurants, setRestaurants] = useState([]);

  useEffect(() => {
    DataStore.query(Restaurant).then(setRestaurants);
  }, []);

  return (
    <View style={styles.page}>
      <FlatList
        data={restaurants}
        renderItem={({ item }) => <RestaurantItem restaurant={item} />}
        showsVerticalScrollIndicator={false}
      />
    </View>
    );
}


const styles = StyleSheet.create({
    page: {
        paddingRight:10,
        paddingLeft:10,
        // padding: 10,
        // marginVertical: 23, //Temperorry Nodge Solution 
      },
});

餐厅项目

import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const RestaurantItem = ({restaurant}) => {
  const navigation = useNavigation();

  const onPress = () => {
    navigation.navigate("Restaurant", {id: restaurant.id})
}
  return (
    <Pressable onPress={onPress} style={styles.restaurantContainer}>
    {/* Restaurant Item */}
    <View style={styles.restaurantContainer} >
      <Image
        source={{uri: restaurant.image,}}
        style={styles.image} />
        <View style={styles.row}>
          <View>
            <Text style={styles.title} >{restaurant.name}</Text>
            <Text style={styles.subTitle} >LKR {restaurant.deliveryFee} &#8226; {restaurant.minDelivery}-{restaurant.maxDelivery} minutes</Text>
          </View>

          <View style={styles.rating}>
            <Text style={styles.rtingText}>{restaurant.rating}</Text>
          </View>
        </View>
    </View>
    </Pressable>
    
  );
};

export default RestaurantItem;

const styles = StyleSheet.create({
    
    restaurantContainer: {
      width: '100%',
      marginVertical: 10,
    },
    image: {
      width: '100%',
      aspectRatio: 5 / 3,
      marginBottom: 5,
    },
    title: {
      fontSize: 18,
      fontWeight: "bold",
      marginVertical: 5,
    },
    subTitle: {
      color: 'gray',
      marginBottom: 5,
    },
    row: {
      flexDirection: "row",
      alignItems: "center",
    },
    rating:{
      marginLeft: "auto",
      backgroundColor: 'lightgray',
      width: 32,
      height: 32,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 20,
    },
  
  });

依赖关系

{
  "name": "mystery-box",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@aws-amplify/rtn-push-notification": "^1.1.0",
    "@react-native-async-storage/async-storage": "^1.18.1",
    "@react-native-community/netinfo": "^9.3.9",
    "@react-native-picker/picker": "^2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/material-bottom-tabs": "^6.2.15",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "amazon-cognito-identity-js": "^6.2.0",
    "aws-amplify": "^5.1.1",
    "aws-amplify-react-native": "^7.0.2",
    "core-js": "^3.30.0",
    "expo": "^48.0.9",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-paper": "^5.5.1",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-vector-icons": "^9.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

我使用下面的代码获取数据，但我没有得到预期的输出，所以请给出解决方案。

主屏幕

import { StyleSheet,View, FlatList, Text } from 'react-native';
import RestaurantItem from '../../components/ResaurantItem';
import { DataStore } from "aws-amplify";
import { Restaurant } from "../../models";
import { useState, useEffect } from "react";
import { restaurants } from '../../../assets/data/restaurants.json';



export default function HomeScreen() {

    const [restaurants, setRestaurants] = useState([]);

  useEffect(() => {
    DataStore.query(Restaurant).then(setRestaurants);
  }, []);

  return (
    <View style={styles.page}>
      <FlatList
        data={restaurants}
        renderItem={({ item }) => <RestaurantItem restaurant={item} />}
        showsVerticalScrollIndicator={false}
      />
    </View>
    );
}


const styles = StyleSheet.create({
    page: {
        paddingRight:10,
        paddingLeft:10,
        // padding: 10,
        // marginVertical: 23, //Temperorry Nodge Solution 
      },
});

输入代码后得到如下输出

但我预计输出低于我提到的

Answer 1

关于您的申请的几个问题：

• 您是否在应用程序的任何位置使用

  Amplify.configure(awsexports)

  配置了 Amplify？
• 您在尝试查询 DataStore 时收到任何错误吗？