React嵌套数组搜索功能异常：清空输入后无法恢复原数据

你的核心问题是把过滤后的结果直接覆盖了存储原始数据的状态，且未处理输入为空时的逻辑。当搜索"Team 1B"后，searchFilter状态已变成过滤后的子集，后续清空输入时是基于这个子集过滤，自然无法恢复全部数据。

解决方案 #

• 拆分状态：仅用状态存储搜索关键词，过滤结果实时从原始groups数据计算，不覆盖原始数据
• 空输入处理：搜索关键词为空时，直接返回所有原始分组数据
• 始终基于原始数据过滤：确保每次过滤操作都从完整的groups数组出发

修改后的完整代码 #

import React, { useState } from "react";

const App = () => {
  // 原始数据，保持不变
  const groups = [
    {
      name: "Male 9 A",
      options: [
        { label: "Team 1", selected: false },
        { label: "Team 2", selected: false },
        { label: "Team 3", selected: false },
        { label: "Team 4", selected: false },
        { label: "Team 5", selected: false }
      ]
    },
    {
      name: "Male 9 B",
      options: [
        { label: "Team 1B", selected: false },
        { label: "Team 2B", selected: false },
        { label: "Team 3B", selected: false },
        { label: "Team 4B", selected: false },
        { label: "Team 5B", selected: false },
      ]
    }
  ];

  // 仅存储搜索关键词，不存储过滤结果
  const [searchKeyword, setSearchKeyword] = useState("");

  // 根据关键词实时计算过滤后的结果
  const filteredGroups = () => {
    // 关键词为空时直接返回所有原始数据
    if (!searchKeyword.trim()) {
      return groups;
    }
    const lowerKeyword = searchKeyword.toLowerCase();
    return groups
      .filter(group => 
        group.options.some(player => 
          player.label.toLowerCase().includes(lowerKeyword)
        )
      )
      .map(data => ({
        ...data,
        options: data.options.filter(player => 
          player.label.toLowerCase().includes(lowerKeyword)
        )
      }));
  };

  const searchList = (e) => {
    setSearchKeyword(e.target.value);
  };

  return (
    <>
      <input 
        type="text" 
        className="head-1"
        onChange={searchList} 
        placeholder="Search"
        value={searchKeyword} // 受控绑定，确保输入框值与状态一致
      />
      {/* 渲染过滤后的分组数据示例 */}
      <div>
        {filteredGroups().map(group => (
          <div key={group.name}>
            <h3>{group.name}</h3>
            <ul>
              {group.options.map(option => (
                <li key={option.label}>{option.label}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </>
  );
};

export default App;

关键修改说明 #

1. 状态拆分：用searchKeyword存储输入内容，过滤逻辑通过filteredGroups函数实时计算，避免原始数据被覆盖
2. 空输入处理：判断关键词为空时直接返回原始数据，解决清空输入后无法恢复的问题
3. 受控输入绑定：添加value={searchKeyword}保证输入框值与状态同步，避免输入异常
4. 性能优化：用some替代find，找到匹配项后立即终止遍历，提升过滤效率

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