与 firebase cloud firestore 反应——呈现来自数据库的数据

Question

我想知道如何从我的云 Firestore 中获取数据。

我已经放弃尝试弄清楚如何用 react-firestore-hooks 做到这一点，我只是想到达我在开始使用钩子之前能够到达的地方。

在我的旧 componentDidMount 中，我可以使用这个：

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
        });

现在，我能做的最好的就是：

useEffect(() => {
    // fetch data
    const unsubscribe = fsDB
      .collection("abs_for_codes")
      .onSnapshot(({ docs }) => {
        setFieldOfResearchesOptions(
          // map data to react-select
          docs.map(doc => {
            const { title } = doc.data();

            return {
              value: doc.id,
              label: title
            };
          })
        );
      }, setFieldOfResearchesError);
    return () => unsubscribe();
  }, [setFieldOfResearchesError, setFieldOfResearchesOptions]);

这会生成我可以用来填充 select 菜单的内容。 select 选项在 select 菜单中列出数据库的标题字段。

我想要了解的是我能够做些什么来呈现原始版本中的 select 选项。

即：

在每个值的开头插入一个字符串作为 'ABS -'
在该字符串后插入每个文档的文档 ID
然后插入标题。

我在旧的 componentDidMount 中工作。

我无法找到将其集成到当前尝试中的方法。

谁能看到如何更改从 Cloud firestore 中提取的值的表示格式？

Answer 1

如果没记错的话，你是在卸载组件时调用 unsubscribe，所以这种方式将不起作用。参见 => https://reactjs.org/docs/hooks-reference.html#useeffect

试试这样：

useEffect(() => {
    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
          }); 
        });
      setFieldOfResearchesOptions(options);
    });

  }, [setFieldOfResearchesError, setFieldOfResearchesOptions]);

与 firebase cloud firestore 反应——呈现来自数据库的数据

React with firebase cloud firestore- presenting data from the database

firebase

reactjs

google-cloud-firestore

react-hooks

use-effect