Question

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

我尝试了此操作，但我的数据未显示在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

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

FlatList的“奇异”之处在于它们是纯组件，因此它们不会总是在您期望的时候重新渲染。 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));

FlatList中未显示AsyncStorage数据

2 个答案: