在类中反应 useEffect 定义

Question

我正在尝试在我的类中设置 useEffect 挂钩（用于监听路由更改），其定义如下 -

export default class AppManger extends Component{
    //constructor
    //componentWillMount
    //reneder
    //...
}

我的其余钩子已定义并按预期工作，但是当我尝试定义 useEffect-

useEffect(() => {
        const { pathname } = location;
        console.log('New path:', pathname);
    }, [location.pathname]);

我得到 - ./src/components/AppManger.js

  Line 30:  Parsing error: Unexpected token

  28 |         }
  29 |     }
> 30 |     useEffect(() => {
     |               ^
  31 |         const { pathname } = location;
  32 |         console.log('New path:', pathname);
  33 |     }, [location.pathname]);

在 React 组件中定义箭头函数的方式正确吗？

谢谢。

Answer 1

不，我的朋友，你不能在类组件中使用钩子， 要使用，您必须将类组件转换为功能组件。 像这样：

import React from "react";

export default AppManger = () => {
    useEffect(() => {
        const { pathname } = location;
        console.log('New path:', pathname);
    }, [location.pathname]);
}

Answer 2

useEffect 和所有其他钩子只能在功能组件中使用。 在您的类组件中，您应该使用生命周期方法。 这是更多信息： 1) https://reactjs.org/docs/state-and-lifecycle.html - 生命周期方法 2) https://reactjs.org/docs/hooks-intro.html - 钩子