如何优化React中基于分类的Map与Filter重复代码

我做了一个带搜索功能的条目展示页面，核心功能如下：

• 页面加载时展示全部分类下的条目
• 支持输入搜索条目，匹配到结果就展示，没匹配到显示“No item found”
  但现在代码里分类渲染的部分重复太多（标注为SECTION TO OPTIMIZE的区域），想知道怎么用单一的过滤和映射逻辑来优化这部分代码。

优化思路 #

核心是先把数据按分类预分组，再动态遍历分类进行渲染，彻底避免重复的filter和map逻辑，同时提升代码扩展性（后续新增分类无需修改渲染代码）。

优化后的完整代码 #

import React, { useState, useMemo } from "react";
import "./index.css";

const object = [
  { category: "One", name: "Mishanta" },
  { category: "One", name: "Virichia" },
  { category: "Two", name: "Steven" },
  { category: "Two", name: "Vikhostana" },
  { category: "Three", name: "Rockhosita" },
  { category: "Three", name: "Johnsonow" },
  { category: "Three", name: "Urvesta" },
  { category: "Two", name: "Dipuota" },
  { category: "One", name: "Dikhosta" }
];

const App = () => {
  const [searchedInput, setSearchedInput] = useState("");

  // 用useMemo缓存分组后的数据，避免重复计算
  const groupedItems = useMemo(() => {
    return object.reduce((acc, item) => {
      if (!acc[item.category]) {
        acc[item.category] = [];
      }
      acc[item.category].push(item);
      return acc;
    }, {});
  }, []);

  // 获取唯一的分类列表（如需排序可在此处处理）
  const categories = useMemo(() => Object.keys(groupedItems), [groupedItems]);

  // 缓存搜索结果，减少重复计算
  const searchedResults = useMemo(() => {
    if (!searchedInput.trim()) return [];
    const searchStr = searchedInput.replace(/\s/g, "").toLowerCase();
    return object.filter(item => 
      item.name.toLowerCase().includes(searchStr)
    );
  }, [searchedInput]);

  return (
    <>
      <input 
        type="text" 
        value={searchedInput}
        onChange={(e) => setSearchedInput(e.target.value)} 
        placeholder="搜索条目..."
      />

      {searchedInput.length > 0 ? (
        searchedResults.length === 0 ? (
          <h4>No item found. Sorry bro..</h4>
        ) : (
          searchedResults.map((x, i) => (
            <div key={i}>
              <h4>Category: {x.category}</h4>
              <span className="selected-styles">{x.name}</span>
            </div>
          ))
        )
      ) : (
        // 优化后的分类渲染区域，无重复代码
        categories.map((category) => (
          <div key={category}>
            <h4>Category: {category}</h4>
            {groupedItems[category].map((x, i) => (
              <span key={i} className="styles">{x.name}</span>
            ))}
            <hr />
          </div>
        ))
      )}
    </>
  );
};

export default App;

关键优化点 #

1. 预分组数据：用Array.reduce把原数组转成{分类名: [对应条目]}的结构，避免重复调用filter
2. 动态分类渲染：通过Object.keys获取分类列表，遍历渲染每个分类的内容，新增分类无需改代码
3. 性能优化：用useMemo缓存分组结果和搜索结果，避免不必要的重复计算
4. 修复细节：给渲染的元素添加合法key，去掉冗余的items状态和初始化useEffect

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