如何使用Hooks从给定对象数组中筛选唯一标签并存储到数组中

针对你提供的imageTag数组，要提取所有不重复的标签并通过React Hooks存储，这里有两种常用实现方式：

一、静态数据场景（数据为导出常量） #

如果imageTag是固定的静态数据，推荐使用useMemo缓存计算结果，避免组件重复渲染时重复执行计算逻辑：

import React, { useMemo } from 'react';
import { imageTag } from './你的数据文件路径';

function UniqueTagsComponent() {
  // 计算并缓存唯一标签数组
  const uniqueTags = useMemo(() => {
    // 1. 把所有元素的tags数组扁平化为一维数组
    const allTags = imageTag.flatMap(item => item.tags);
    // 2. 利用Set去重，再转成数组格式
    return Array.from(new Set(allTags));
  }, [imageTag]); // 仅当imageTag变化时重新计算

  return (
    <div>
      <h3>所有唯一标签</h3>
      <ul>
        {uniqueTags.map(tag => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>
    </div>
  );
}

export default UniqueTagsComponent;

代码说明： #

• flatMap(item => item.tags)：遍历imageTag每个元素，取出其tags数组合并成一个一维数组，比如将["nature", "bird"], ["nature"]合并为["nature", "bird", "nature"]。
• new Set(allTags)：利用Set的唯一性自动过滤重复值，得到不重复的标签集合。
• Array.from(...)：将Set集合转换为数组，方便后续遍历渲染。
• useMemo：缓存计算结果，只有当依赖项imageTag变化时才重新执行计算，提升组件性能。

二、动态数据场景（数据从API获取） #

如果imageTag是从接口动态获取的，结合useState和useEffect处理：

import React, { useState, useEffect } from 'react';

function DynamicUniqueTagsComponent() {
  const [imageData, setImageData] = useState([]);
  const [uniqueTags, setUniqueTags] = useState([]);

  useEffect(() => {
    // 模拟API请求获取数据
    fetch('你的接口地址')
      .then(res => res.json())
      .then(data => {
        setImageData(data);
        // 计算唯一标签并更新状态
        const allTags = data.flatMap(item => item.tags);
        setUniqueTags(Array.from(new Set(allTags)));
      });
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return (
    <div>
      <h3>所有唯一标签</h3>
      <ul>
        {uniqueTags.map(tag => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>
    </div>
  );
}

export default DynamicUniqueTagsComponent;

代码说明： #

• useState：分别存储接口返回的图片数据和计算出的唯一标签数组。
• useEffect：在组件挂载时发起API请求，获取数据后计算唯一标签并更新状态。

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