Question

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

这是我设想的用法：

await useAfterImport("@custom/path");

这是我的错误尝试：

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

此尝试失败，因为违反了 Rules of Hooks：

<块引用>

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

有没有一种方法可以在不使用回调参数的情况下编写这样的钩子？我真的很希望能够返回一个 Promise 以便它可以被await编辑。

Answer 1

我认为 Promises 不是正确的方法：

<块引用>

这是我设想的用法：

<块引用>

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 和来自自定义钩子的解析值将是一个微不足道的调整。

自定义钩子返回 Promise 但在 useEffect

1 个答案: