为什么我的 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 (将#修改为@）