Ошибка реагирования при монтаже или смонтированном компоненте может быть вызвана быстрыми и частыми вызовами setState()

Question

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

это ошибка он бросает:

warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. 
This usually means you called setState() on an unmounted component. This is a no-op. 
Please check the code for the Nav component. 

Код, который трассировки стека указывает на том, что вызывает ошибку является handleResize() метод на Nav компонента. Сделав немного поиска и поиска в Google, я обнаружил, что причина заключается в том, что setState() вызывается перед установкой компонента. Что странно, потому что прослушиватели событий регистрируются в componentDidMount(). В статье предлагается использовать componentWillMount Нет сигары. Я не совсем уверен, почему это происходит. Может быть, из-за того, что размер изменения размеров происходит быстрыми темпами?

handleResize() { 
    this.setState((prevState, currProps) => ({ 
     height: window.innerHeight, 
     width: window.innerWidth 
    })); 
    if (this.props.showMenu === undefined) { 
     if (this.state.width > (this.props.breakPoint || 767) && this.state.showMenu) { 
     this.setState((prevState, currProps) => ({ 
      showMenu: false, 
     })); 
     } 
    } else { 
     if (this.state.width > (this.props.breakPoint || 767) && this.props.showMenu) { 
     this.props.closeMenu(); 
     } 
    } 
    } 

    componentDidMount() { 
    window.addEventListener('resize', this.handleResize.bind(this)); 
    } 

    componentWillUnmount() { 
    window.removeEventListener('resize', this.handleResize.bind(this)) 
    } 

Answer 1

this.handleResive.bind(this) создает новую функцию, которая означает, что window.removeEventListener('resize', this.handleResize.bind(this)) также создает новую функцию и не передавая ту же функцию, что вы добавили в первую очередь. Это означает, что тот, который вы создали с привязкой и добавленный ранее, не удаляется, поскольку это не та же функция (хотя она будет вести себя точно так же).

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

componentDidMount() { 
    const resizeHandler = this.handleResize.bind(this); 
    this.setState({resizeHandler}); 
    window.addEventListener('resize', resizeHandler); 
} 

componentWillUnmount() { 
    window.removeEventListener('resize', this.state.resizeHandler); 
    //you could cleanup state here but it's not necessary 
} 

Если у кого есть лучший способ для хранения обработки событий функции пожалуйста перезвон в