React.js - 有条件地调用 useDocument 挂钩

Question

我在 React 中有以下代码：

export const useData= (previewMode: boolean) => {
  if (previewMode) {
    let [value_, loading, error]: any = useDocument(
      doc(getFirestore(app), "settings", "content"),
      {
        snapshotListenOptions: { includeMetadataChanges: true },
      },
    );

    const value: any =
      value_?.data() === undefined ? { data: contentFile } : value_.data();

    return { data: value, loading: loading };
  }
  return {data: contentFile, loading: false};
};

contentFile 是一个静态 JSON 文件，

问题是我不断收到以下错误：

src\lib\use-data.tsx
  Line 11:41:  React Hook "useDocument" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks

现在我知道了 react-hooks 的规则，但问题是我需要一个条件，没有它，useDocument 钩子将始终被调用，我们将查询 firestore，但我不想要那个。

我只想在预览模式打开时加载文档，可以吗？

我是这样使用这个钩子的： const { 值，数据 } = useData(previewMode);

提前致谢

Answer 1

您不能将挂钩放入条件中。它们必须在组件中声明为顶级，因为 React 会根据它们的顺序对它们进行索引，然后您在条件中使用声明的结果。

你的情况：

export const useData = (previewMode: boolean) => {
  const document = useDocument(
    doc(getFirestore(app), "settings", "content"),
    {
      snapshotListenOptions: { includeMetadataChanges: true },
    }
  );

  if (previewMode) {
    let [value_, loading, error]: any = document;
  }
  /* rest of component */
}

document 现在无论条件如何声明，React 可以跟踪它。

如果除非需要，否则不希望调用 firebase 文档，请考虑不渲染当前组件，除非 previewMode 为真。例如：

{ previewMode && <useData /> }

这意味着在您的组件中 previewMode 始终为真，因此可以简化：

export const useData = (previewMode: boolean) => {
  let [value, loading, error]: any = useDocument(
    doc(getFirestore(app), "settings", "content"),
    {
      snapshotListenOptions: { includeMetadataChanges: true },
    },
  );

  return { data: value.data(), loading };
};

React.js - 有条件地调用 useDocument 挂钩

React.js - call useDocument hook conditionally

firebase

reactjs