React Native, "setState() on unmounted component" warning

Question

У меня есть кусок кода, который вызывает предупреждение (код должен войти в REST и выключить индикатор активности). Я не понимаю, как мой компонент можно размонтировать, поскольку я привязываю onLoginPressed к нажатию кнопки, после того, как все возможные монтировки уже будут завершены. Пожалуйста, помогите мне избавиться от него и понять причину предупреждения ...
UPD: Благодаря комментариям я выяснил, что компонент размонтирован, а компонентWillUnmount вызывается ... Но я не понимаю, почему и когда он происходит ...

«Предупреждение: SetState (...):.. Может только обновить смонтированная или монтаж компонента Это обычно означает, что вы назвали SetState() на отмонтированном компонента Это нет- op. Проверьте код для неопределенного компонента . "

Вот мой код, предупреждение инициируется второй setState:

onLoginPressed(){ 
    console.log('Attempted to login with: '+this.state.username); 
    this.setState({showProgress: true}); 

    AuthService.login({ 
     login: this.state.username, 
     password: this.state.password 
    }, (results)=> { 
     this.setState(Object.assign({ // have to create a solid Object with all states to be changed at once 
     showProgress: false // turning off ActivityIndicator 
     }, results)); 

     if(results.success && this.props.onLogin){ 
     this.props.onLogin(); // Yey! We logged in! Let's move to the next View 
     } 
    }); 
    } 

... AuthService.js:

login (creds, callback) { 
    fetch(CFG.AUTH_URL) 
     .then((response)=> { 
     if((response.status >= 200) && (response.status < 300)){ 
      return response.json(); 
     } 
     throw { 
      serverError: (response.status == 500) || (response.status == 501), 
      unknownError: (response.status != 500) || (response.status != 501) 
     }; 
     }) 
     .then((result)=> { 
      AsyncStorage.multiSet([ // Have to save login+password and session_hash for later use... 
      [authKey, JSON.stringify(creds)], 
      [sessionKey, result.data.session_hash] 
      ], (err)=> { 
      if (err) throw err; 
      }); 
      return callback({success: true}); 
     } 
     }) 
     .catch((err)=> { 
     return callback(err); 
     }); 
    }// end of login 

Answer 1

Федор Усаков, я столкнулся с этой проблемой, а также , Я обнаружил, что компонент был повторным рендерингом из-за установки состояния в функции обратного вызова AuthService.login(). Вопрос (в данной ситуации) с setState:

Там нет никакой гарантии синхронной работы вызовов SetState и вызовы могут группироваться в целях повышения производительности.

от React документы

Я думаю, что государство не устанавливается сразу, а затем this.props.onLogin() называется. Это исключает компонент до того, как состояние может быть установлено, и voila, предупреждение.

Чтобы получить работу на моем рабочем месте, я удалил условное обозначение и вызвал onLogin() и добавил метод shouldComponentUpdate() к классу Login. В shouldComponentUpdate() я разместил удаленный условный и вызов. Как так:

onLoginButtonPress() { 
    // some code 

    AuthService.login({ 
     username: this.state.username, 
     password: this.state.password 
    }, (results) => { 
     this.setState({ 
      ...results, 
      showProgress: false 
     }); 
    }); 
} 

shouldComponentUpdate() { 
    if (this.state.loginSuccess && this.props.onLogin) { 
     this.props.onLogin(); 
    } 
    return true; 
} 

Это гарантирует, что состояние было установлено, компонент затем повторно делает и потому, что this.state.loginSuccess теперь является истинным, называют this.props.onLogin(), который вызывает Login размонтировать.