title: React native Unable to render the page with force update or set state
body: <pre><code>class Wait extends Component{
  
  constructor(props) {
    super(props);
    this.state = { fetchingData: true, data: [], check: ''}
    this.forceUpdateHandler.bind(this);
    }
  
  getData = async() =&gt; {
    try {
      data = await AsyncStorage.getItem('restaurants');
      if (data != null) {
        this.setState({fetchingData: false , data: JSON.parse(data)})
      }
    } catch(error){
       console.log(error)
    }
  }
  
  forceUpdateHandler(){
      this.forceUpdate();
  };
  
  componentDidMount(){
    this.getData();
  }
  
  renderRestaurant(){
    return this.state.data.map((item) =&gt; {
      return (
      &lt;View style ={{marginTop: 20, backgroundColor: 'red', marginTop: 20 }}&gt;
        &lt;Text&gt; {item.name} &lt;/Text&gt;
        &lt;Text&gt; {item.time} &lt;/Text&gt;
        &lt;Text&gt; {item.wait} &lt;/Text&gt;
        &lt;Text&gt; {item.people} &lt;/Text&gt;
        &lt;Button title = 'cancel' onPress = { async () =&gt; {
          let data = await AsyncStorage.getItem('restaurants');
          let temp = JSON.parse(data)
          let i = -1
          temp.map((value, index) =&gt; {
            if (value.name == item.name){
              i = index;
            }
          })
          if (i &gt; -1){
            temp.splice(i, 1)
            await AsyncStorage.setItem('restaurants', JSON.stringify(temp))
          }
          this.forceUpdateHandler()         // First way
          this.forceUpdate()                // Second way
          this.setState({check: 'checked'})   // Third way
        }
        }
        /&gt;
      &lt;/View&gt;
    )
  })
  }
  
  render(){
    const { navigate } = this.props.navigation;
    const { navigation } = this.props;
  
    return (
      &lt;View style={{width:200, height:200, justifyContent:'center', alignItems:'center', }}&gt;
            {this.state.fetchingData ? null : this.renderRestaurant()}
      &lt;/View&gt;
    )
  }
  }
  </code></pre>
  
  <p>I am trying to make the page re-render each time after I click the button. Once click the button, it access the AsyncStorage and delete the corresponding element in the array, then it update the AsyncStorage with the new array and re-render the page. </p>
  
  <p>I have tried the following: </p>
  
  <pre><code>1) call forUpdate directly after the update of the AsyncStorage
  2) define the forceUpdateHandler function and bind it with this
  3) call this.setState after the update of the AsyncStorage
  </code></pre>
  
  <p>But none of the above options re-renders the page. Can someone help to fix it? An example would be great! Thanks in advance. </p>