Javascript 如何从nextjs上的处理程序访问状态？

我有一个由自定义应用程序（

\u-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)

从“下一个/App”导入应用程序；
从“下一个/路由器”导入路由器
从“下一个/路由器”导入{withRouter}
从“~/components/MyAppContext”导入MyAppContext；
类MyApp扩展了应用程序{
状态={
语言：空
};
getCurrentLanguage（url）{
...
}
HandlerRouteChange（url）{
console.log（'应用程序正在更改为：'，url）
this.setState（//抛出：未处理的拒绝（TypeError）：这是未定义的
{语言：this.getCurrentLanguage（url）}
)
}
componentDidMount=（）=>{
this.setState（{language:this.getCurrentLanguage（）}）
Router.events.on（'routeChangeStart'，this.handleRouteChange）
};
render（）{
const{Component，pageProps}=this.props；
返回(
);
}
}
使用路由器导出默认值（MyApp）

该函数是类成员，但

这取决于调用该函数的上下文，而不是声明的。您正在将函数引用传递给侦听器，侦听器将从其他地方调用它，这意味着
此
将不再引用该类

您必须手动将其绑定到
此
，或者将其设置为箭头函数

handleRouteChange=（url）=>{
//或
Router.events.on（'routeChangeStart'，this.handleRouteChange.bind（this））