Как получить доступ к состоянию из обработчика на следующем js? - PullRequest
Новая
       27

Как получить доступ к состоянию из обработчика на следующем js?

0 голосов
/ 04 марта 2020

У меня есть обработчик, определенный пользовательским приложением (_app), подключенный к событию routeChangeStart.

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

Необработанное отклонение (TypeError): это не определено

Здесь код: 

import App from 'next/app';
import Router from 'next/router'
import { withRouter } from 'next/router'
import MyAppContext from '~/components/MyAppContext';


class MyApp extends App {

    state = {
      language: null
    };

    getCurrentLanguage(url){
        ...
    }

    handleRouteChange(url){
      console.log('App is changing to: ', url)
      this.setState (  //throws: Unhandled Rejection (TypeError): this is undefined
         {language: this.getCurrentLanguage(url)}
      )
    }
    componentDidMount = () => {

      this.setState({language: this.getCurrentLanguage()})
        Router.events.on('routeChangeStart', this.handleRouteChange)
      };

    render() {
      const { Component, pageProps } = this.props;

      return (
        <MyAppContext.Provider value={{ language: this.state.language }}>
          <Component {...pageProps} />
        </MyAppContext.Provider>
      );
    }
  }

export default withRouter(MyApp)

1 Ответ

1 голос
/ 04 марта 2020

Функция является членом класса, но this зависит от контекста, где функция называется , а не объявлена ​​. Вы передаете ссылку на функцию слушателю, который будет вызывать ее откуда-то еще, что означает, что this больше не будет ссылаться на класс.

Вам придется либо связать ее с this вручную, или сделайте это функцией стрелки. 

handleRouteChange = (url) => {

// or

Router.events.on('routeChangeStart', this.handleRouteChange.bind(this))
...