不能在高阶组件中使用钩子

Question

我想在HOC中使用useState钩子，但这会阻止组件被呈现

这是我的组件

import WithAccessControl from "components/HOC/AccessControl";
function GoalPage(props: any) {
return <div>Who stole my goals?</div>;
}
export default WithAccessControl(GoalPage);

，这是我的HOC组件传递给:

import React from "react";
const WithAccessControl = (Component: React.FC) => {
debugger;
[state, setState] = React.useState();
return Component;
};
export default WithAccessControl;

当我不使用useState()在我的HOC，它工作得很好，但添加后，它只是不渲染没有任何控制台错误，并在添加调试器到代码后，我注意到，webpack抛出一个错误。

---

这是webpack从调试器抛出错误的方式:

__webpack_require__.i.push((options) => {
const originalFactory = options.factory;
options.factory = function (moduleObject, moduleExports, webpackRequire) {
__webpack_require__.$Refresh$.setup(options.id);
try {
originalFactory.call(this, moduleObject, moduleExports, webpackRequire);
} finally {
if (typeof Promise !== 'undefined' && moduleObject.exports instanceof Promise) {
options.module.exports = options.module.exports.then(
(result) => {
__webpack_require__.$Refresh$.cleanup(options.id);
return result;
},
(reason) => {
__webpack_require__.$Refresh$.cleanup(options.id);
return Promise.reject(reason);
}
);
} else {
__webpack_require__.$Refresh$.cleanup(options.id)
}
}
};
})

是什么导致错误，为什么?

Answer 1

你不能在普通函数中使用钩子，只能在组件中使用。你的HOC不是一个组件，而是一个返回组件的包装器方法。

你想要的是类似(simple version)

import React from "react";
const WithAccessControl = (Component: React.FC) => {
debugger;
return (props) => {
const [state, setState] = React.useState();

return <Component {...props} />;
}
};
export default WithAccessControl;

Answer 2

一旦更改"WithAccessControl"到小写的"withAccessControl"这对我很有效。以小写w开头