AsyncStorage 数据未显示在 FlatList 中

Question

我创建了一个从 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>
        );
    }
}

请问有什么问题？

Answer 1

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

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

extraData={ this.state.pronostics }

致您的FlatList。

Answer 2

问题解决了。

我换了：

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

作者：

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