如何解决对象数组不使用setState和map渲染
我在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>
)
}```
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。