Не удается выполнить обновление состояния React для неустановленного компонента. (Компонент класса)

Question

Проблема

Я пишу приложение на реактивном языке, но не могу исправить это конкретное предупреждение. Я понимаю, что это вызвано запросом данных, но компонент отключается до завершения запроса. Кроме того, я применил некоторые решения, найденные здесь , но не могу заставить его работать. Это мой код, и я применил решение ниже.

class PeopleScreen extends React.Component {

      constructor(props) {
        super(props);
        this.state = {
          listData : [ ]
        };
    
      }
  
      componentDidMount() {
        // Get list of people.
        AsyncStorage.getItem("people",
          function(inError, inPeople) {
            if (inPeople === null) {
              inPeople = [ ];
            } else {
              inPeople = JSON.parse(inPeople);
            }
            this.setState({ listData : inPeople });
          }.bind(this)
        );
    
      };
   
      render() { return (
      )

Это решение, которое я применил:

 class PeopleScreen extends React.Component {
    _isMounted = false;

      constructor(props) {

        super(props);

        this.state = {
          listData : [ ]
        };

      }

      componentDidMount() {
        this._isMounted = true;

        // Get list of people.
        AsyncStorage.getItem("people",
          function(inError, inPeople) {
            if (inPeople === null) {
              inPeople = [ ];
            } else {
              inPeople = JSON.parse(inPeople);
            }
            this.setState({ listData : inPeople });
          }.bind(this)
        );

      };

      componentWillUnmount() {
        this._isMounted = false;
      }

      render() { return ( 

      )

Также посмотрите на ошибку:

Answer 1

У меня такое чувство, что у вас может быть проблема с асинхронным кодом здесь. Ваш обратный вызов выглядит нормально и технически должен работать, но я бы посоветовал вам попробовать переписать ваш обратный вызов как Обещание с разрешением .

Кроме того, вы также можете улучшить свой код следующим образом, избавившись от лишних if/else, но это скорее эстетическое предпочтение c.

AsyncStorage.getItem('people').then(async (value) => {
  let inPeople = value ? JSON.parse(value) : [];
  this.setState({ listData : inPeople });
  // or even a one-liner: this.setState({ listData : value ? JSON.parse(value) : [] });
});

Answer 2

Вам необходимо заключить в setState оператор if, чтобы проверить, является ли значение _isMounted истинным

if(this._isMounted) {
  this.setState({ listData : inPeople });
}