使平面列表异步反应为本机

Question

我有一个flatlist，它不是异步的，所以如果我更新视图中的某个内容，我必须返回主屏幕并重新输入以检查修改或保存我的项目，我已经在获取中实现了异步并等待，但仍然什么都没发生！

这是我的代码，如果有人能帮我解决这个问题，我会很感激

class listDépenses extends React.Component{
constructor(props) {
super(props);
this.delayValue = 8000;
this.state = {
search:'', 
dataSource: [],
animatedValue: new Animated.Value(0),
Montant:'',
Titre:'',
isLoading:true,
modalVisible:false,
}
this.arrayholder=[]
}
onPresino(item){
this.props.navigation.navigate(
'supprimerDépense',
{item})}
renderSeparator =() => {
return(
<View  style={{height:1,width:'100%',backgroundColor:'#ccc'}}>
</View>
)}
renderItem = ({item}) => {
this.delayValue = this.delayValue + 500;
const translateX = this.state.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [this.delayValue,1]
});
return(
<Animated.View
style={[styles.button, { transform: [{ translateX }] }]}
>
<View style={{flex:1,}}>

<View style={{flexDirection:'row',padding:10,flex:1}}>
<Avatar.Image
source={{
uri:uri
size={50}
/>
<Text style={[globalStyles.sousTitre,{marginVertical:10,marginLeft:10}]}>{item.Titre}</Text>
<Text style={[globalStyles.sousTitre, 
{marginVertical:10,marginLeft:40,textAlignVertical:'auto',opacity:0.8,fontWeight:'800'}]}> 
{item.Montant} 
</Text>
<View style={{flex:1,alignItems:'flex-end',marginVertical:10}}>            
<TouchableOpacity             
onPress={()=>  this.onPresino(item)}>

<Image
style={{ marginRight:50}}
source={require('../img/corbeille.png')}
/>
</TouchableOpacity>
</View>
</View>      
</View>
</Animated.View>
)}
async componentDidMount() {
Animated.spring(this.state.animatedValue, {
toValue: 1,
tension: 20,
useNativeDriver: true
}).start();
return await fetch('http://localhost:8080/api/depenses')
.then((response )=> response.json())
.then(responseJson => {
this.setState({
dataSource: responseJson,
isLoading: false,},
function() {
this.arrayholder = responseJson;
});})
.catch(error => { console.error(error);
});
}
search = text => { console.log(text);
};
clear = () => { this.search.clear();
};
SearchFilterFunction(text) {
const newData = this.arrayholder.filter(function(item) { const itemData = item.Titre ? 
item.Titre.toUpperCase() :
''.toUpperCase();
const textData = text.toUpperCase(); return itemData.indexOf(textData) > -1;
});
this.setState({ dataSource: newData, search: text,
});
}
remove= async ()=>{
const _id=this.props.route.params.item._id;
const apiUrl='http://192.168.1.10:8080/api/depenses';
Alert.alert(
//title
'Confirmez votre choix',
//body
'Voulez-vous vraiment supprimer cet article?',
[
{
text: 'Confirmer',
onPress: () =>   fetch(apiUrl + "/" + _id, {
method: 'DELETE',
mode:'no-cors',
}).then(() => {
Alert.alert(
"Message de confirmation",
"Dépense supprimée.",
[

{ text: "OK", onPress: () => this.props.navigation.navigate('listDépenses') }
]
);         }).catch(err => {
console.error(err)})},
{
text: 'Annuler',
onPress: () => console.log('Cancel'), style: 'cancel'},],
{cancelable: false},
//clicking out side of alert will not cancel);}
render(){
if (this.state.isLoading) { return (
<View style={{ flex: 1, paddingTop: 21 }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.container}>
<SearchBar  
round="default" 
lightTheme="default"
searchIcon={{ size: 25 }}
onChangeText={text => this.SearchFilterFunction(text)} onClear={text => 
this.SearchFilterFunction('')} placeholder="Tapez ici pour chercher..." value= 
{this.state.search}
/>
<View style={{marginBottom:10}}></View>

<FlatList
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
enableEmptySections={true} style={{ marginTop: 11 }}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)}}

Answer 1

如果有人需要，我已经找到了解决方案：您只需要实现一个重新加载数据的功能：

displayData(){
return  fetch('http://localhost:8080/api/depenses')
.then((response )=> response.json())
.then(responseJson => {
this.setState({
dataSource: responseJson,
isLoading: false,
},
function() {
this.arrayholder = responseJson;
});})
.catch(error => { console.error(error);
});
}
componentDidUpdate()
{
this.displayData()
}
componentDidMount() {
this.getData();
Animated.spring(this.state.animatedValue, {
toValue: 1,
tension: 20,
useNativeDriver: true
}).start();
this.displayData()
}

这就是功能：

getData = async () => {
const apiUrl='http://localhost:8080/api/depenses';
await fetch(apiUrl,{
method:'get',
mode:'no-cors',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
}

})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
dataSource:responseJson
})
})
.catch((error) =>{
console.log(error)
})
}