Утечка памяти в React-Native Tab Navigator из-за отсутствия компонентов не будет отключена

Question

Я действительно запутался, как решить проблему отмены асинхронного процесса при переходе на новую вкладку.Если вы запустите асинхронный запрос на странице, но затем перейдете на новую вкладку до его завершения, вы получите предупреждение: «Невозможно вызвать setState (или forceUpdate) для неустановленного компонента» *

Однако,смена экранов с помощью навигатора вкладок никогда не приведет к отключению воли, поэтому нет места для отмены каких-либо операций.Стек Навигатор и переключатель навигатор запускают это, и я могу отменить любые операции просто отлично.Я буквально собираюсь построить свою собственную нижнюю навигацию, чтобы обойти это.

Этот пример - способ взломать IMHO:

ДА, я попробовал подход this.isMounting (кстати, теперь вы получите предупреждение isMounting (...) устарело, если вы используетечто) Да, я использовал метод willupdate, но PureComponent должен удалить этот «хак».

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

// Хакерский пример в асинхронном методе

 try {
            let response = await fetch(
                 'https://your/rest/endpoint/with/json'
            );
            if (response.ok) {

                if (!_isMounted) {
                    console.log('oops! ' + SCREEN_NAME + ' was unmounted before async');
                    return; // just bail if component is no longer mounted
                }

                let responseJson = await response.json();
`

Answer 1

Redux не ошибается, но, для моего случая, сложнее, чем требуется.

Итак, если кто-то борется с React-Navigation Tab Navigator и асинхронной выборкой. Я смог добиться паттерна, который был после (запуск события, чтобы иметь возможность отменить асинхронные события).

Вы МОЖЕТЕ добавить Слушателя, когда экран перемещается к или от (размытие)

React Navigation генерирует события для компонентов экрана, которые подписываются на них:

willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
willBlur - the screen will be unfocused
didBlur - the screen unfocused (if there was a transition, the transition completed)

В основном я сделал это:

async componentDidMount() {
console.log(SCREEN_NAME + ' Component Did Mount');

this.props.navigation.addListener('willBlur', (route) => {
  _isMounted = false;
  this.axiosCancelSource.cancel('Component unmounted.');
});

// didFocus will fire on 1st Mount as well
this.props.navigation.addListener('didFocus', async (route) => {
  _isMounted = true;
  this.axiosCancelSource = axios.CancelToken.source();     
  await this._getTourList();     
});
 console.log(SCREEN_NAME + ' Component Did Mount Complete');
 }

Веб-сайт реквизита React-Navtive Navigation

Answer 2

Если вы используете Redux:

Вы можете переместить весь свой асинхронный код в действие ...

Если вы выполняете свой асинхронный код в действии вместо того, чтобы выполнять его в жизни вашего компонента ... это нормально, если пользователь решил перейти на другую вкладку и действие не было разрешено пока ((потому что он работает в ином контексте, нежели жизненный цикл компонента)) ... ... как только действие будет выполнено, а ваш компонент все еще активен >>, тогда он получит новый набор реквизитов для обновления ...

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

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      // other fields...
      isUnmounted: false,
    };
  }

  componentWillUnmount() {
    this.setState({ isUnmounted: true });
  }

  setComponentState = (values) => {
    if (!this.state.isUnmounted) this.setState(values);
  };
}