如何使用 Firestore 中的数据在 React 中创建一组唯一字段值？答案

【问题标题】：How do I create an array of unique field values in React with data from Firestore?如何使用 Firestore 中的数据在 React 中创建一组唯一字段值？
【发布时间】：2021-02-09 10:59:43
【问题描述】：

我正在从 Firestore 中检索数据，然后使用以下代码将其显示在列表中：

{ docs && docs.map(doc => (
     <ul key={doc.id}>               
        <li>
             <button>
                  <Link to={`/tag/${doc.myTag}`}>
                      {doc.myTag}
                  </Link>
             </button>
        </li>
     </ul>
))}

这会输出每个标签。起初我想从 Firestore 中获取数据数组并设置到我自己的新数组中。之后，我想删除重复项并仅显示唯一标签。这样做的正确方法是什么？

我正在考虑创建一个新数组，然后使用 filter + indexOf 或类似的东西，但我需要先创建一个包含所有标签的数组，这就是我遇到问题的地方。

非常感谢任何帮助。

【问题讨论】：

标签是字符串还是其他形式？
标签是一个字符串，存储在一个普通的 Firestore 文档中，例如我需要数组中每个文档的标签（我认为）createdAt: 2020 年 10 月 26 日 18:29:42 UTC+8 myBody "some body terxt" myTag "a tag in a string" URL "firebasestorage.googleapis.com/imageURL"跨度>

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

如果我正确地回答了您的问题，以下内容应该会有所帮助：

从 Firestore 获取数据到数组。首先，您必须遍历 Firestore 的一个对象，然后将它们保存到一个新数组中。

例如：

 documentName.firestore().collection("collectionName").doc(yourDoc).get().then(queryResult =>{

      //Here create new array and push your data to array after making it unique 
      //using set or any other function

  });

queryResult 是 DocumentSnapshot：它“包含从 Firestore 数据库中的文档读取的数据。可以使用.data() 或 .get() 来获取特定字段。”

【讨论】：

就是这个，谢谢苏尔曼。你完全理解我的问题。

【解决方案2】：

const docs = [ {tag: 'test'},
              {tag: 'test1'},
              {tag: 'test2'},
              {tag: 'test2'},
              {tag: 'test2'}
             ];

const unique = [...new Set(docs.map(({tag})=> tag))];
console.log(unique);

【讨论】：

干杯@UKS，但它首先得到了数组，这是问题所在。我不知道如何将 Firestore 中的数据提取到数组中。

【解决方案3】：

也许解决方案是新设置？

let clearDocs = [...new Set(docs)];

【讨论】：

“文档”已经是唯一的，这是我需要的每个文档中的标签字段