对象数组不使用setState和map渲染

Question

我在react-native项目中使用Typescript，并希望使用map函数使用AWS-Amplify呈现来自查询的对象数组。 我使用setState（在此为setTracks）声明我的状态。 虽然它在控制台中的日志记录很好，但是map函数不会呈现任何内容。

代码如下：

 import {useEffect, useState} from 'react';
 import {
   ScrollView,
   SafeAreaView,
   StyleSheet,
   Image,
   TouchableWithoutFeedback,
   ImageBackground,
   Dimensions
 } from "react-native";
 import EditScreenInfo from '../components/EditScreenInfo';
 import { Text, View } from '../components/Themed';
 
 import Amplify from 'aws-amplify'
 import config from './aws-exports'
 Amplify.configure(config)
 
 import { API, graphqlOperation } from 'aws-amplify'
 import { listTracks } from '../src/graphql/queries'
 
 export default function TabTwoScreen() {
   const [tracks, setTracks] = useState<Array>([])
   //const [tracks, setTracks] = useState([])
 
   useEffect(() => {
     fetchTracks()}, [])
 
   async function fetchTracks() {
     try {
       const trackData = await API.graphql(graphqlOperation(listTracks))
       console.log('trackData:', trackData.data.listTracks.items)
       setTracks([trackData])
       console.log('trackdata is: ', tracks)
     } catch (err) {
       console.log('error fetching tracks...', err)
     }
   };
     return (
       <SafeAreaView style={styles.container}>
         {
           tracks.map((track, index) => (
             <View key={index} style={styles.item}>
               <Text style={styles.name}>{track.song}</Text>
               <Text style={styles.description}>{track.artist}</Text>
               <Text style={styles.city}>{track.songUrl}</Text>
             </View>
           ))
         }
       </SafeAreaView>
     )
   }```