本机反应:警告:无法在现有状态转换期间进行更新

Question

我正在获取数据，然后将它们保存在移动平台上的sqlite文件中。当调用此屏幕时，componentDidMount()函数将开始调用获取代码。当提取结束时，就会有一个setState()调用componenDidUpdate()函数(将数据保存在sqlite中，然后保存在setState= 'isLoadingDataProgramadas: false'中)，所以我希望应用程序能够使用React NavigationV3向'ActProgramadas'屏幕转换。下面的解决方案有效，但我得到了一个警告：

警告:无法在现有状态下更新(例如在“呈现”中)。呈现方法应该是道具和状态的纯函数。

我怎么才能解决呢？

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>

      );
  }

Answer 1

1. 它看起来像是if else语句中的一个错误。
2. 然后尝试像这样绑定导航事件处理程序，或者在构造函数中这样做。

试试这个：

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>

      );
      }
  }

Answer 2

可能是navigation.navigate在幕后使用，这是一个setState函数。我的建议是创建一个函数，将导航封装到这样的setTimeout函数中。

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

...

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