React Native：警告：在现有状态转换期间无法更新答案

【问题标题】：React Native: Warning: Cannot update during an existing state transitionReact Native：警告：在现有状态转换期间无法更新
【发布时间】：2019-05-13 14:32:08
【问题描述】：

我正在获取数据，然后将它们保存在移动设备上的 sqlite 文件中。当这个屏幕被调用时，获取代码开始被componentDidMount() 函数调用。当提取结束时，setState() 会调用componenDidUpdate() 函数（将数据保存在 sqlite 然后setState= 'isLoadingDataProgramadas: false'）所以我希望应用程序使用 React-Navigation V3 转换到'ActProgramadas' 屏幕。下面的解决方案有效，但给我一个警告：

警告：在现有状态期间无法更新（例如在 '使成为'）。渲染方法应该是 props 的纯函数和状态。

我该如何解决这个问题？

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>

      );
  }

【问题讨论】：

标签： android reactjs react-native navigation react-navigation

【解决方案1】：

可能 navigation.navigate 在后台使用了一个 setState 函数。我的建议是制作一个函数来将导航封装成这样的 setTimeout 函数

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

...

<View>
    {this.navigate()}
</View>

【讨论】：

【解决方案2】：

它看起来像是您的 if else 声明中的错字。
并尝试像这样绑定您的导航事件处理程序或在构造函数中执行此操作。

试试这个：

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>

      );
      }
  }

【讨论】：