AsyncStorage 数据未显示在 FlatList 中

Posted 2023-03-14

【中文标题】AsyncStorage 数据未显示在 FlatList 中

【英文标题】：AsyncStorage data not displayed in FlatList

【发布时间】：2019-01-06 16:59:12

【问题描述】：

我创建了一个从 URL（对象数组）检索数据并将其显示在 FlatList 中的应用程序。我是初学者，因此我暂时不使用 Redux 或其他。我想将我的数据存储在 AsyncStorage 中并显示出来。

我试过这个，但我的数据没有显示 int FlatList:

import React, Component from 'react';
import ScrollView, View, FlatList, Image, ActivityIndicator, AsyncStorage from 'react-native';
import axios from "axios";
import ListItem from "react-native-elements";
import createAppContainer, createStackNavigator from "react-navigation";
import AppConfig from "../../AppConfig";
import Keys from "../../data/Constants/Storage";
import PronosticsDetailsScreen from "../../screens/PronosticsDetailsScreen";

class MontanteTab extends Component 

    state = 
        errors: null,
        isLoading: true,
        pronostics: [],
    ;

    async componentDidMount() 
        const isConnected = true;

        if (isConnected) 
            await this.loadPronostics();
        

        try 
            this.setState(pronostics: JSON.parse(await AsyncStorage.getItem(Keys.pronosticsMontante)));
         catch (error) 
            console.log(error);
        
    

    loadPronostics() 
        this.setState(isLoading: true, error: null);

        return axios.get(AppConfig.apiUrl + 'montante').then(async response => 
            await AsyncStorage.setItem(Keys.pronosticsMontante, JSON.stringify(this.state.pronostics));
            this.setState(isLoading: false);
        ).catch(error => 
            this.setState(isLoading: false, error: error.response);
            console.log(error);
        );
    

    render() 
        if (this.state.isLoading === true) 
            return (
                <View style=flex: 1, padding: 20>
                    <ActivityIndicator/>
                </View>
            )
        

        return (
            <View>
                <ScrollView>
                    <View>
                        <FlatList
                            data=this.state.pronostics
                            extraData=this.state.pronostics
                            keyExtractor=(item, index) => index.toString()
                            renderItem=(item) => (
                                <ListItem
                                    key=item.id
                                    roundAvatar
                                    badge=
                                        value: item.statut,
                                        textStyle: color: '#fff',
                                        containerStyle: marginRight: 0, backgroundColor: item.couleur
                                    
                                    avatar=<Image
                                        source=uri: AppConfig.imagesPronosticsUrl + item.image
                                        style=borderRadius: 50, height: 50, width: 50/>
                                    title=item.competition
                                    subtitle=item.equipe_domicile + ' - ' + item.equipe_exterieur
                                    onPress=() => this.props.navigation.navigate('PronosticsDetails', 
                                        item,
                                    )
                                />
                            )
                        />
                    </View>
                </ScrollView>
            </View>
        );
    

请问有什么问题？

【参考方案1】：

我不是这里的专家，但是...

FlatLists 的一个“奇怪”之处在于它们是纯组件，因此它们并不总是在您期望的时候重新呈现。 FlatList 在这里为您提供帮助，并提供了一个名为 extraData 的属性。您可以使用它来告诉FlatList 看什么以了解是否有重要变化。所以，尝试添加：

extraData= this.state.pronostics 

致您的FlatList。

【讨论】：

感谢您的回答，我试过了，但没有任何改变：/

【参考方案2】：

问题解决了。

我换了：

await AsyncStorage.setItem(Keys.pronosticsMontante, JSON.stringify(this.state.pronostics));

作者：

await AsyncStorage.setItem(Keys.pronosticsMontante, JSON.stringify(response.data));