javascript - 如何在类组件中使用 next.js 中的 "useRouter()"？

Question

我试图通过使用 useRouter() 从“next/router”和使用该 id 从我的服务器获取一些数据。当我在无状态功能组件中使用它时，它起作用了。

但是页面显示“无效 Hook 调用”。我尝试调用无状态功能组件的 getInitalProps()，但它在那里也不起作用并显示相同的错误。使用这种方法有什么规律吗？

我正在使用 React 库和 Next.js 框架开发前端。

constructor(props) {
  this.state = {
    loc: useRouter().query.loc,
    loaded: false
  };
}

Answer 1

Hooks 只能在功能组件内部使用，不能在类内部使用。我建议使用 withRouter根据 next.js 文档的 HOC:

use the useRouter hook, or withRouter for class components.

或参见From Classes to Hooks如果你想切换到钩子(Hook)。

---

通常，可以创建一个包装器功能组件以通过 props 将自定义 Hook 传递到类组件中(但在这种情况下没有用):

const MyClassWithRouter = (props) => {
  const router = useRouter()
  return <MyClass {...props} router={router} />
}

class MyClass...
  constructor(props) {
    this.state = {
      loc: props.router.query.loc,
      loaded: false
    };
  }