javascript - AsyncStorage 数据未显示在 FlatList 中
问题描述
我创建了一个从 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>
);
}
}
请问有什么问题吗?
解决方案
我不是这里的专家,但是...
关于 s 的一个“奇怪”的事情FlatList
是它们是纯组件,因此它们并不总是在您期望的时候重新呈现。FlatList
在这里可以帮助您并提供一个名为extraData的属性。您可以使用它来判断FlatList
要观看的内容,以了解是否有重要变化。所以,尝试添加:
extraData={ this.state.pronostics }
到你的FlatList
.
推荐阅读
- sql - 对于我的日期类型字段之一,我被困在使用 SQL*Loader 和 to_date()
- javascript - 如何获取 id 中的第二个值来进行 onchange 函数?
- microsoft-graph-api - 如何使用 microsoft graph api 删除回复和转发中的原始消息
- javascript - 错误 [ERR_REQUIRE_ESM]: 必须使用 import 来加载 ES 模块
- amazon-web-services - CloudFront - S3 源故障转移和源响应超时
- elasticsearch - Elasticsearch 读取模型与写入模型同步
- javascript - 如何使用 reactjs 为我的电子商务项目乘法?
- c# - 如何使用 MVVM 架构在 WPF 中设置组合框值
- firebase - 在 Firestore 中创建文档时如何使用自定义文档 ID
- android - binding.getRoot() - 无法解析方法