React Native: Предупреждение: невозможно обновить во время существующего перехода состояния - PullRequest
Новая
       44

React Native: Предупреждение: невозможно обновить во время существующего перехода состояния

1 голос
/ 13 мая 2019

Я выбираю данные и сохраняю их в файле sqlite на мобильном телефоне.Когда этот экран вызывается, код выборки начинает вызываться функцией componentDidMount().Когда выборка завершена, это setState() вызывает функцию componenDidUpdate() (сохранение данных в sqlite, затем setState= 'isLoadingDataProgramadas: false'), поэтому я хочу, чтобы приложение перешло на экран 'ActProgramadas' с React-Navigation V3.Приведенное ниже решение работает, но выдает мне предупреждение:

Предупреждение: не удается обновить в существующем состоянии (например, в «render»).Методы рендеринга должны быть чистой функцией реквизита и состояния.

Как это исправить? 

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 ]

0 голосов
/ 13 мая 2019

Вероятно, навигация. Navigate использует под капотом функцию setState. Я предлагаю сделать функцию для инкапсуляции навигации в функцию setTimeout, как это 

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

...

<View>
    {this.navigate()}
</View>
0 голосов
/ 13 мая 2019
  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>

      );
      }
  }
...