React中如何从FireStore数组内对象获取特定Tags数据

首先纠正你代码里的错误：直接修改tags状态数组（tags.push(...)）不符合React状态不可变的原则，会导致状态更新异常。应该先通过临时变量收集所有标签，再做去重和提取操作。

基础重构后的代码（先正确收集并去重标签对象） #

const [blogs, setBlogs] = useState([]);
const [tags, setTags] = useState([]);

useEffect(() => {
  const getBlogsData = async () => {
    const blogRef = collection(db, 'blogs');
    const blogsSnapshot = await getDocs(blogRef);
    
    // 处理博客数据
    const blogsData = blogsSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    setBlogs(blogsData);
    
    // 收集所有标签并去重
    const allTags = blogsSnapshot.docs.flatMap(doc => doc.get("tags"));
    // 根据id去重，避免重复标签
    const uniqueTags = Array.from(new Map(allTags.map(tag => [tag.id, tag])).values());
    setTags(uniqueTags);
  };
  getBlogsData();
}, []);

场景1：提取标签对象的特定属性（比如只获取text字段） #

如果想要把标签对象转换成纯文本数组（比如['sport', 'liverpool', 'fashion']），只需在去重后映射提取属性：

const uniqueTagTexts = uniqueTags.map(tag => tag.text);
setTags(uniqueTagTexts);

场景2：筛选符合特定条件的标签对象 #

比如只保留id为sport的标签，或者筛选包含特定关键词的标签：

• 筛选id为sport的标签：

const filteredTags = uniqueTags.filter(tag => tag.id === 'sport');
setTags(filteredTags);

• 筛选text包含pool的标签：

const filteredTags = uniqueTags.filter(tag => tag.text.includes('pool'));
setTags(filteredTags);

场景3：提取特定标签的单个属性值 #

如果只需要某一个特定标签的text，比如找id为liverpool的标签文本：

const targetTagText = uniqueTags.find(tag => tag.id === 'liverpool')?.text;
// 可以存入单独的状态或者直接使用

内容的提问来源于stack exchange，提问作者DummyData1590