React Native: Warning: Cannot update during an existing state transition

1
votes

I'm fetching data then saving them in a sqlite file on the mobile. When this screen is called the fetch code begins called by componentDidMount() function. When the fetch is over this does a setState() thus calls componenDidUpdate() function (saving the data in sqlite then setState= 'isLoadingDataProgramadas: false') so I want the application to make a transition to 'ActProgramadas' screen with React-Navigation V3. The solution below works, but gets me a warning:

Warning: Cannot update during an existing state (such as within 'render'). Render methods should be a pure function of props and state.

How can I fix that?

componentDidMount() {
    this.doFetch();
 }

componentDidUpdate(){
    this.openBD();
    this.insertSQLITE();
}
 componentWillUnmount() {
    this.closeDatabase();
 }

 render() {
    if(this.state.isLoadingDataProgramadas)
      return (
          <View style={stylesLoading.container}>
              <View>
                  <ActivityIndicator size="large" color="lightblue"/>
              </View>

              <View>
                  <Text style={stylesLoading.texto}>
                  Descargando datos... 
                  </Text>
              </View>
          </View>
      );
    else
      return( 
         <View>
           {this.props.navigation.navigate('ActProgramadas')}
         </View>

      );
  }
2
androidreactjsreact-nativenavigationreact-navigation

2 Answers

0
votes

Probably navigation.navigate uses under the hood, a setState function. My suggestion is to make a function to encapsulate the navigation into a setTimeout function like that

navigate = () => {
    const { navigation } = this.props
    setTimeout(() => {
        navigation.navigate('ActProgramadas')
    }, 1000);
}

...

<View>
    {this.navigate()}
</View>
0
votes
  1. Its looks like a typo in Your if else statement.
  2. And try to bind Your navigation event handler like this or do it in constructor.

Try this:

render() {
    if(this.state.isLoadingDataProgramadas) {
      return (
          <View style={stylesLoading.container}>
              <View>
                  <ActivityIndicator size="large" color="lightblue"/>
              </View>

              <View>
                  <Text style={stylesLoading.texto}>
                  Descargando datos... 
                  </Text>
              </View>
          </View>
      );
      } else {
      return( 
         <View>
           {() => this.props.navigation.navigate('ActProgramadas')}
         </View>

      );
      }
  }