自定义钩子返回 Promise，但在 useEffect 中解析

Question

我正在尝试编写一个钩子，该钩子执行动态import并返回一个在导入完成后解析的Promise。

以下是我对它的用法的设想：

await useAfterImport("@custom/path");

这是我的错误尝试：

const useAfterImport = (importPath:string) => {
return new Promise<void>((resolve) => {
useEffect(() => {
import(importPath).then(() => {
resolve();
});
}, [importPath]);
});
};

此尝试失败，因为违反了钩子规则：

React Hook "useEffect" 不能在回调中调用。反应钩子 必须在 React 函数组件或自定义 React Hook 中调用 功能。eslintreact-hooks/rules-of-hooks

有没有办法在不诉诸回调参数的情况下编写这样的钩子？ 我真的很希望能够返回Promise以便可以对其进行await编辑。

Answer 1

我不认为承诺是正确的方式：

以下是我对它的用法的设想：

await useAfterCustomImport("@custom/path");

React 组件函数体的顶层——唯一可以使用钩子的地方——里面不能有await——它们需要立即渲染一些东西(即使暂时是一个空片段)。

对于你想做的事情，状态更有意义。您可以执行以下操作：

const useAfterCustomImport = (importPath: string) => {
const [imported, setImported] = useState(false);
useEffect(() => {
import(importPath)
.then(() => setImported(true))
// .catch(handleErrors); // don't forget this part
}, []);
return imported;
};

然后

const libImported = useAfterCustomImport('some-lib');
return !libImported ? null : (
<div>
// JSX that uses the library
</div>
); 

这遵循当前代码的当前逻辑，该逻辑似乎假定导入仅包含副作用，而不是解析为可用值。如果模块解析为可用值，则从自定义挂钩返回imported和解析值将是一个微不足道的调整。