reactjs - 在 HoC 中使用 React hook 时发出警告

Question

我创建了一个更高阶的组件，它应该为我的组件添加一些附加功能。但是，当我在此组件中使用 React hooks 时，我收到以下 eslint 警告。

React Hook "React.useEffect" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. (react-hooks/rules-of-hooks)

为什么我会收到此警告？在 HoC 中使用钩子(Hook)被认为是不好的做法吗？

最小示例:

const Hello = props => <p>Greetings {props.name}</p>;

const Wrapper = Component => props => {
  React.useEffect(() => {
    // Do something here
  }, []);
  return <Component {...props} />;
};

export default Wrapper(Hello)

代码沙箱: https://codesandbox.io/s/proud-tree-5kscc

Answer 1

转换

props => {
  React.useEffect(() => {
    // Do something here
  }, []);
  return <Component {...props} />;
};

在 HOC 内的函数(react-hooks/rules-of-hooks 会抛出在 HOC 返回的箭头函数中使用时显示的警告)

所以，将其更改为

const Wrapper = Component =>
  function Comp(props) {
    React.useEffect(() => {
      console.log("useEffect");
    }, []);
    return <Component {...props} />;
  };

并且效果被触发。

Here is a working example on codesandbox