React JS中如何使用多标签过滤对象数组数据

先修正你代码里的几个基础语法错误，不然跑不起来：

• 所有字符串类型的值要加单/双引号，比如name: 'Mike'、state: 'New York'
• useState的更新函数拼写错误，setTgas改成setTags
• onChange回调要补全闭合括号

接下来直接上完整实现，包含标签增删、数据过滤的全部逻辑：

import { useState } from 'react';

// 修正后的原始数据
const data = [
  { id: 1, name: 'Mike', city: 'philps', state: 'New York' },
  { id: 2, name: 'Steve', city: 'Square', state: 'Chicago' },
  { id: 3, name: 'Jhon', city: 'market', state: 'New York' },
  { id: 4, name: 'philps', city: 'booket', state: 'Texas' },
  { id: 5, name: 'smith', city: 'brookfield', state: 'Florida' },
  { id: 6, name: 'Broom', city: 'old street', state: 'Florida' },
];

// 初始标签数据
const initialTags = [
  { state: 'New York' },
  { state: 'Texas' },
  { state: 'Florida' },
];

function FilterDataByTags() {
  const [tags, setTags] = useState(initialTags);

  // 添加标签：避免重复添加相同state的标签
  const addTag = (newTagState) => {
    const isExist = tags.some(tag => tag.state === newTagState);
    if (!isExist) {
      setTags([...tags, { state: newTagState }]);
    }
  };

  // 移除标签：根据state值删除对应标签
  const removeTag = (tagState) => {
    setTags(tags.filter(tag => tag.state !== tagState));
  };

  // 过滤数据的核心逻辑
  const filteredData = () => {
    // 无标签时返回全部数据
    if (tags.length === 0) return data;
    // 把标签的state转成Set，提升判断效率
    const tagStates = new Set(tags.map(tag => tag.state));
    // 筛选出state在标签集合中的数据项
    return data.filter(item => tagStates.has(item.state));
  };

  return (
    <div>
      {/* 标签操作区：添加标签输入框 + 已选标签展示 */}
      <div>
        <input 
          type="text" 
          placeholder="输入州名添加标签"
          onKeyDown={(e) => {
            if (e.key === 'Enter' && e.target.value.trim()) {
              addTag(e.target.value.trim());
              e.target.value = '';
            }
          }}
        />
        <div>
          {tags.map(tag => (
            <span key={tag.state} style={{ margin: '0 5px', padding: '2px 8px', border: '1px solid #ccc', borderRadius: '4px' }}>
              {tag.state}
              <button onClick={() => removeTag(tag.state)} style={{ marginLeft: '5px', border: 'none', background: 'transparent', cursor: 'pointer' }}>×</button>
            </span>
          ))}
        </div>
      </div>

      {/* 过滤后的数据展示区 */}
      <div>
        <h3>过滤结果</h3>
        <ul>
          {filteredData().map(item => (
            <li key={item.id}>
              {item.name} - {item.city} - {item.state}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default FilterDataByTags;

关键逻辑说明 #

1. 标签去重添加：添加标签前用some判断是否已存在，避免重复标签
2. 标签移除：用filter过滤掉要删除的标签项，更新状态
3. 数据过滤：
   • 标签为空时直接返回全部数据
   • 标签存在时，先把标签的state转成Set（判断元素是否存在的效率比数组高），再用filter筛选出符合条件的数据项
4. 实时更新：因为tags是useState管理的状态，增删标签时状态更新会触发组件重新渲染，filteredData会自动计算最新的过滤结果

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