Как избежать асинхронных операций от установки состояния на размонтированном компоненте?

Question

Давайте представим, что компонент загружает данные с сервера, используя fetch .

fetch(`${url}`).then(response => {
                    this.setState({
                        ...
                    })
                })

Но возможно, что данные загружаются после , компонент отключен, чтоприведет к попытке setState на не подключенном компоненте.

Насколько серьезна такая проблема и как ее избежать?

Answer 1

Вам захочется взглянуть на AbortController класс .Использование _mounted считается анти-паттерном:

class Test extends React.ComponentComponent {
    componentDidMount() {
        this.controller = new AbortController();

        fetch(`${url}`, { signal: controller.signal }).then(response => {
            this.setState({ })
        })
    }

    componentWillUnmount() {
        this.controller.abort()
    }
}

Вызов функции abort вашего контроллера отменит ваш fetch.Я бы рекомендовал вызывать его в функции жизненного цикла componentWillUnmount.

Совместимость с браузерами: https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort#Browser_compatibility

Answer 2

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

Я сталкивался с этим при использовании механизма подсказок реагирующей навигации.Модуль v2, я сделал грязный обходной путь, имея переменную, которая сообщает мне, смонтирован ли компонент или размонтирован

class Modal extends React.PureComponent {
....
_mounted=false;
componentDidMount(){this._mounted = true}
componentWillUnmount(){this._mounted = false}
....

, а затем каждый раз, когда я вызываю setstate, я проверяю, истинно ли this._mounts перед выполнением этого.

Теперь в реагирующей навигации v3 ящик не размонтирует экраны, поэтому я счастлив без его использования