React-firestore-hooks 从云 Firestore 中获取数据库记录

Posted 2023-02-22

【中文标题】React-firestore-hooks 从云 Firestore 中获取数据库记录

【英文标题】：React-firestore-hooks to fetch database records from cloud firestore

【发布时间】：2020-03-07 21:08:03

【问题描述】：

我正在尝试弄清楚如何在我的 react 应用程序中使用 react-firebase-hooks，以便简化对数据库的调用。

我之前的版本（在 this question 的帮助下解决了这个尝试）将此类组件与 componentDidMount 函数一起使用（它有效）：

class Form extends React.Component 
    state = 
      options: [],
    

    async componentDidMount() 
        // const fsDB = firebase.firestore(); // Don't worry about this line if it comes from your config.
        let options = [];
        await fsDB.collection("abs_for_codes").get().then(function (querySnapshot) 
        querySnapshot.forEach(function(doc) 
            console.log(doc.id, ' => ', doc.data());
            options.push(
                value: doc.data().title.replace(/( )/g, ''),
                label: doc.data().title + ' - ABS ' + doc.id
            );
            );
        );
        this.setState(
            options
        );
    

我现在正在尝试学习如何使用钩子通过 react-firebase-hooks 从数据库中获取数据。我目前的尝试是：

import  useDocumentOnce  from 'react-firebase-hooks/firestore';

我也试过 从 'react-firebase-hooks/firestore' 导入 useDocument ;

const [snapshot, loading, error] = useDocumentOnce(
  firebase.firestore().collection('abs_for_codes'),
  options.push(
    value: doc.data().title.replace(/( )/g, ''),
    label: doc.data().title + ' - ABS ' + doc.id
  ),
);

这会生成一个错误提示：'useDocumentOnce' is not defined

我试过了（这也是不正确的）：

const [snapshot, loading, error] = useDocumentOnce(
  firebase.firestore().collection('abs_for_codes'),
  snapshot.push(
    value: doc.data().title.replace(/( )/g, ''),
    label: doc.data().title + ' - ABS ' + doc.id,
  ),
);

如何从 firebase 获取收藏？我正在尝试使用从 firebase 中名为 abs_for_codes 的集合中读取的选项填充选择菜单。

我认为 useState 的意义在于我不再需要声明状态，我可以调用 我在下面添加了我的选择尝试：

<Select 
            className="reactSelect"
            name="field"
            placeholder="Select at least one"
            value=valuesSnapshot.selectedOption
            options=snapshot
            onChange=handleMultiChangeSnapshot
            isMulti
            ref=register
          />

作为参考，我的表单中有另外 2 个选择菜单。我用来设置选项的 const 是手动定义的，但建立它们的值的过程如下：

const GeneralTest = props => 
  const  register, handleSubmit, setValue, errors, reset  = useForm();
  const  action  = useStateMachine(updateAction);
  const onSubit = data => 
    action(data);
    props.history.push("./ProposalMethod");
  ;

  const [valuesStudyType, setStudyType] = useState(
    selectedOptionStudyType: []
  );

  const [valuesFundingBody, setFundingBody] = useState(
    selectedOptionFundingBody: []
  );


  const handleMultiChangeStudyType = selectedOption => 
    setValue("studyType", selectedOption);
    setStudyType( selectedOption );
  ;

  const handleMultiChangeFundingBody = selectedOption => 
    setValue("fundingBody", selectedOption);
    setFundingBody( selectedOption );
  ;

  useEffect(() => 
    register( name: "studyType" );
    register(name: "fundingBody");
  , []);

如何从数据库查询中添加快照？

我尝试为快照制作类似的 handleMultiChange const 和 useEffect 注册语句，如下所示：

  const [snapshot, loading, error] = useDocumentOnce(
    firebase.firestore().collection('abs_for_codes'),
    snapshot.push(
      value: snapshot.data().title.replace(/( )/g, ''),
      label: snapshot.data().title + ' - ABS ' + snapshot.id
    ),
  );

  const [valuesField, setField ] = useState(
    selectedOptionField: []
  );

  const handleMultiChangeField = selectedOption => 
    setValue("field", selectedOption);
    setField( selectedOption );
  ;

但它不起作用。错误消息说：

ReferenceError: 在初始化之前无法访问“快照”

我找不到如何使用数据库中的数据填充选择菜单的示例。

下一次尝试

useEffect(
    () => 
      const unsubscribe = firebase
        .firestore()
        .collection('abs_for_codes')
        .onSnapshot(
          snapshot => 
            const fields = []
            snapshot.forEach(doc => 
              fields.push(
                value: fields.data().title.replace(/( )/g, ''),
                label: fields.data().title + ' - ABS ' + fields.id
              )
            )
            setLoading(false)
            setFields(fields)
          ,
          err => 
            setError(err)
          
        )
      return () => unsubscribe()
    )

这也不起作用 - 它会产生一条错误消息：

TypeError: fields.data 不是函数

下一次尝试

认识到我需要搜索集合而不是调用文档，但仍然不确定 useCollectionData 是否比 useCollectionOnce 更合适（我无法理解有关 useCollectionData 提供什么的文档），我现在尝试了：

const [value, loading, error] = useCollectionOnce(
  firebase.firestore().collection('abs_for_codes'),
  getOptions(
    firebase.firestore.getOptions:
    value: doc.data().title.replace(/( )/g, ''),
    label: doc.data().title + ' - ABS ' + doc.id,
  ),
);

这也是不正确的。错误消息指向 getOptions 行并说：Parsing error: Unexpected token, expected ","

在我的收藏中，我有许多文档。每个都有 2 个属性，一个数字和一个文本字符串。我的选择是格式化数字和文本字符串，以便它们一起出现，以及我作为文本插入的首字母缩写词（就像我使用 componentDidMount 所做的那样）。

下一次尝试

我接下来尝试了这个：

const fields = firebase.firestore.collection("abs_for_codes").get().then(function(querySnapshot) 
  querySnapshot.forEach(function(doc) 
    console.log(doc.id, ' => ', doc.data());
    fields.push(
        value: doc.data().title.replace(/( )/g, ''),
        label: doc.data().title + ' - ABS ' + doc.id
    );
    );
);

错误消息说：TypeError: _firebase__WEBPACK_IMPORTED_MODULE_5__.firebase.firestore.collection is not a function

下一次尝试

const searchFieldOfResearchesOptions = (searchKey, resolver) => 
    // for more info
    // https://***.com/questions/38618953/how-to-do-a-simple-search-in-string-in-firebase-database
    // https://firebase.google.com/docs/database/rest/retrieve-data#range-queries
    fsDB
      .collection("abs_for_codes")
      .orderBy("title")
      // search by key
      .startAt(searchKey)
      .endAt(searchKey + "\uf8ff")
      .onSnapshot(( docs ) => 
        // map data to react-select
        resolver(
          docs.map(doc => 
            const  title  = doc.data();

            return 
              // value: doc.id,
              // label: title
              value: title.data().title.replace(/( )/g, ''),
              label: title.data().title + ' - ABS ' + title.id
            ;
          )
        );
      , setFieldOfResearchesError);
  ;

这种尝试实际上可以从数据库中检索数据（万岁）——除了我无法获得我想要呈现的文本标签。集合中的每个文档都有 2 个字段。第一个是标题，第二个是 ID 号，我的最后一步是制作一个插入文本的标签（即 ABS - ），然后将 ID 号和标题放在一起。

我添加了注释代码以显示提取每个文档标题的有效方法，但是我尝试按照我想要的方式制作标签的额外部分不会出现错误，它只是不起作用 - 我仍然只获取列表中的文档标题。

有谁知道如何使用钩子从 Cloud Firestore 集合中生成一组选择菜单选项？

【问题讨论】：

明天我将获得新的赏金以尝试获得解决此问题的帮助 - 我仍在尝试弄清楚如何使用 firebase

【参考方案1】：

从 'react-firebase-hooks/firestore' 导入 useDocument ；

为什么？你用的是useDocumentOnce，当然需要导入这个函数，没有useDocument，你不用。

最后一个错误：您甚至在初始化之前就使用了 const，因此

ReferenceError: 在初始化之前无法访问“快照”

快照将由 useDocumentOnce 初始化，您不能将它（快照）用作传递给将要对其进行初始化的函数的参数。

另外，我查看了 react-firebase-hooks，这里是 useDocumentOnce 的文档：

使用this 示例，并对其进行调整以使用您要使用的文档。

import  useDocument  from 'react-firebase-hooks/firestore';

const FirestoreDocument = () => 
  const [value, loading, error] = useDocument(
    firebase.firestore().doc('hooks/nBShXiRGFAhuiPfBaGpt'),
    
      snapshotListenOptions:  includeMetadataChanges: true ,
    
  );
  return (
    <div>
      <p>
        error && <strong>Error: JSON.stringify(error)</strong>
        loading && <span>Document: Loading...</span>
        value && <span>Document: JSON.stringify(value.data())</span>
      </p>
    </div>
  );
;

您可以像示例中那样使用 useDocument，但也可以选择使用 useDocumentOnce。但在这种情况下，相应地更改导入（改为import useDocumentOnce from 'react-firebase-hooks/firestore';?

【讨论】：

感谢您的宝贵时间。我已多次阅读此工具的文档，并查看了您在此处粘贴的摘录，并多次尝试使用它们。这些都没有用。这些文档在 useDocumentOnce 示例中不包含导入语句 - 所以我尝试了两者（如上所述），看看这是否是问题的一部分。我试图弄清楚如何使用我已经适应的示例（或任何其他有效的方法）从数据库中获取记录，因为我能够在挂钩之前使用 componentDidMount。

你知道如何用这个工具来初始化 const 吗？

【参考方案2】：

这里有不止一个问题。看看这是否有帮助。

这会生成一个错误提示：'useDocumentOnce' is not defined

import useDocumentOnce from 'react-firebase-hooks/firestore';

如果您按照 DOC 所说的那样导入它，并且遇到此错误，我会说您的开发环境有问题。尝试使用不同的代码编辑器，甚至是不同的 PC。 如果您按照您所说的正确导入它，那么您的代码没有任何问题，您不应该收到此错误。这不是您的代码中的错误。

---

查看useCollection 和useDocumentOnce 的文档（它们非常相似）：

现在看看你在做什么：

const [snapshot, loading, error] = useDocumentOnce(
  firebase.firestore().collection('abs_for_codes'),
  snapshot.push(
    value: doc.data().title.replace(/( )/g, ''),
    label: doc.data().title + ' - ABS ' + doc.id,
  ),
);

您没有为useDocumentOnce 函数发送正确的参数。它需要一个 document 引用和一个选项对象。您正在向options 参数发送collection 引用和一堆其他代码。

您的代码应如下所示：

const [snapshot, loading, error] = useDocumentOnce(
  firebase.firestore().collection('abs_for_codes').doc('someDocID')
);

或

const [snapshot, loading, error] = useDocumentOnce(
  firebase.firestore().collection('abs_for_codes').where('someProperty','==','someValue')
);

请注意，我没有包含 options 参数，因为它是可选的。如果您需要某些特定选项，请发送它。

---

使用useDocumentOnce 钩子的组件应该是什么样子。

import  useDocumentOnce  from 'react-firebase-hooks/firestore';

const FirestoreDocument = () => 
  const [snapshot, loading, error] = useDocumentOnce(
    firebase.firestore().collection('someCollection').doc('someDocID'),
    
      snapshotListenOptions:  includeMetadataChanges: true ,
    
  );
  return (
    <div>
      <p>
        error && <strong>Error: JSON.stringify(error)</strong>
        loading && <span>Document: Loading...</span>
        snapshot && (
          <span>
            Document: JSON.stringify(snapshot.data()
          </span>
        )
      </p>
    </div>
  );
;

【讨论】：

嗨@cbdev420 - 我尝试了useDocument和useDocumentOnce（正如我所说）。你让我意识到我应该试着弄清楚如何使用 useCollection。不确定我是否应该尝试使用 useCollection 或 useCollectionData。我的收藏名为 abs_for_codes。它们每个都有一个标签和值，我想在集合中添加额外的内容，以将名称和 id 放在一起显示。您能理解执行此操作的说明，以便该函数返回集合中每个项目的列表吗？

来自react-firebase-hooks “React Firebase Hooks 为存储在 Cloud Firestore 中的集合和文档提供了便利的侦听器。”。他们是听众，您无法使用它向集合中添加任何内容。

我建议您暂时摆脱react-firebase-hooks 并深入了解firebase and firestore docs。阅读所有指南。直接使用firestore API，而不是使用这个其他库。然后，再往前走，当你对 firebase 和 firestore 有更好的把握时，如果你愿意，你可能会回到这个react-firebase-hooks。

我让它在没有钩子的情况下工作。现在我正在尝试弄清楚如何将它与钩子一起使用。

我不想添加任何东西。我正在尝试从中提取数据，然后对其进行格式化以将标签和 id 添加到字符串中以呈现它 - 正如我能够在适应钩子之前使用 componentDidMount 所做的那样。

【参考方案3】：

我确定您已经这样做了，但以防万一……您是否使用终端命令 npm install --save react-firebase-hooks 在项目中安装了 react-firebase-hooks 依赖项？如果您尚未安装依赖项，则可以解释消息 useDocumentOnce is not defined。这是installation document 的链接。当我忘记安装软件包或依赖项时，我已经收到该消息，这就是您的错误消息让我想到这一点的原因。