如何解决为什么我的 FlatList 没有从 graphql 服务器渲染项目?
我已经在我的 React Native 项目中设置了 apollo。我有很多事情要做,但我的 FlatList 没有呈现。我在两个地方使用这个组件:一个立即加载,另一个(当前相同)在另一个选项卡上。第一个根本不显示,第二个正常显示。
在我看来,问题是当 events
更新时 FlatList 没有正确更新,但我无法弄清楚。我曾尝试将 exTradata
与 refresh
状态一起使用,但无济于事。
import React,{ useEffect,useState } from 'react';
import { Text,SafeAreaView,FlatList,StyleSheet,View } from 'react-native';
import Card from './Card';
import { useQuery,gql } from '@apollo/client'
import AppLoading from 'expo-app-loading';
const MY_EVENTS_QUERY = gql`
query myEvents {
myEvents {
id
title
date
description
type
users {
name
}
}
}
`
export default (ref,title) => {
const [events,setEvents] = useState([]);
const [refresh,setRefresh] = useState(false);
const { data,error,loading } = useQuery(MY_EVENTS_QUERY)
useEffect(() => {
if (error) {
console.log('Error fetching events',error.message)
}
},[error])
useEffect(() => {
if (data) {
setEvents(data.myEvents)
setRefresh(!refresh)
}
},[data])
return (
<SafeAreaView style={{justifyContent: 'center',alignItems: 'center',backgroundColor: '#eceff4',flex: 1}}>
<FlatList
ref={ref}
showsverticalScrollIndicator={false}
style={{ width: '100%' }}
data={events}
exTradata={refresh}
renderItem={({item}) => renderItem({item},title)}
keyExtractor={item => item.id}
/>
</SafeAreaView>
)
}
function renderItem({item},title) {
switch(item.type) {
case 'title':
return (
<Text style={styles.title}>
{title}
</Text>
);
case 'time':
return (
<Text style={[styles.title,{fontSize: 40,marginTop: 20}]}>
{item.title}
</Text>
);
case 'buffer':
return (
<View style={{height: 50}}/>
)
default:
return (
<Card env={title} {...item} />
)
}
}
const styles = StyleSheet.create({
title: {
fontSize: 60,fontFamily: 'AbrilFatface_400Regular',margin: 10,marginLeft: 30,marginTop: 40,color: '#3b4252',}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。