React中数组状态管理及连续搜索功能的最佳实践

核心问题很明确：你现在直接修改了存储原始数据的状态，导致后续搜索只能基于已经过滤过的子集，自然会出现结果受限的情况。下面是几种可行的解决方案，按推荐程度排序：

1. 保留原始数据副本（最常用的最佳实践） #

这是React处理这类搜索场景的标准做法，核心是把原始完整数据和展示用的过滤后数据拆成两个独立状态：

• 初始化时，把接口返回的完整数据存在originalData状态里，这个状态只在首次获取数据时更新，后续不再改动。
• 用displayData状态存过滤后的结果，供菜单展示。
• 每次搜索时，都基于originalData重新过滤，再更新displayData。

代码示例：

import { useState, useEffect } from 'react';

function MenuSearch() {
  const [originalData, setOriginalData] = useState([]);
  const [displayData, setDisplayData] = useState([]);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [preGameKey, setPreGameKey] = useState(null);

  // 首次加载获取完整数据
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/your-data-endpoint', {
        method: 'POST',
        // 此处添加你的请求体配置
      });
      const data = await response.json();
      setOriginalData(data);
      setDisplayData(data); // 初始展示全部数据
    };
    fetchData();
  }, []);

  // 监听搜索词变化，重新过滤数据
  useEffect(() => {
    if (!searchKeyword.trim()) {
      setDisplayData(originalData); // 清空搜索词时恢复全部数据
      return;
    }
    const filtered = originalData.filter(item => 
      // 根据你的数据字段调整搜索逻辑，比如按名称匹配
      item.name.toLowerCase().includes(searchKeyword.toLowerCase())
    );
    setDisplayData(filtered);
  }, [searchKeyword, originalData]);

  return (
    <div>
      <input 
        type="text"
        value={searchKeyword}
        onChange={(e) => setSearchKeyword(e.target.value)}
        placeholder="输入关键词搜索..."
      />
      <ul className="menu-list">
        {displayData.map(item => (
          <li 
            key={item.id}
            onClick={() => setPreGameKey(item.id)}
            className={preGameKey === item.id ? 'active' : ''}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

• 优势：不需要重复请求接口，性能稳定；状态职责清晰，不会出现数据污染；搜索逻辑直观，每次都基于完整数据源，连续搜索毫无问题。
• 注意：如果数据量极大（比如上万条），可以搭配虚拟滚动组件优化渲染性能，普通场景下完全够用。

2. 实时计算过滤结果（适合小数据量场景） #

如果你的菜单数据量很小（比如几十条），可以不用额外维护displayData状态，直接在渲染时根据originalData和搜索词实时计算过滤结果：

function MenuSearch() {
  const [originalData, setOriginalData] = useState([]);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [preGameKey, setPreGameKey] = useState(null);

  useEffect(() => {
    // 同上面的fetch逻辑
  }, []);

  // 实时计算过滤后的结果
  const filteredData = searchKeyword.trim()
    ? originalData.filter(item => 
        item.name.toLowerCase().includes(searchKeyword.toLowerCase())
      )
    : originalData;

  return (
    <div>
      <input 
        type="text"
        value={searchKeyword}
        onChange={(e) => setSearchKeyword(e.target.value)}
      />
      <ul>
        {filteredData.map(item => (
          <li key={item.id} onClick={() => setPreGameKey(item.id)}>
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

• 优势：少维护一个状态，代码更简洁；小数据量下性能可以忽略不计。
• 劣势：数据量大时，每次渲染都重新过滤会有性能损耗，此时还是第一种方案更合适。

3. 重新请求接口重置数据（仅特殊场景使用） #

这个方案不推荐，除非你的原始数据会实时动态更新（比如其他用户修改了数据），否则完全没必要：

• 每次搜索前（比如清空搜索词时）调用GetData重新获取完整数据，再进行过滤。
• 可以加防抖逻辑避免频繁请求，但本质上还是会增加服务器压力，用户也需要等待加载，体验不如前两种方案。

总结：优先选第一种“保留原始数据副本”的方案，这是行业通用的最佳实践；数据量小的话可以用第二种简化代码；第三种只在数据实时更新的特殊场景下考虑。

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