Make Flatlist asynchrone react native

Question

I have an flatlist which isn't asynchrone so if i update something in my view i have to go back to the home screen and re-enter to check the modifications or save my project , i have implemented async and await in my fetch but still nothing happens !

Here is my code if someone could help me with this issue i'll appreciate it

     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

I've found the solution if anyone need it : You just have to implement a function that reloads data:

   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()
 }

and this is the function :

  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)
  })

 }