React中使用filter实现的搜索功能二次失效问题解决

问题核心是你每次搜索都基于已经过滤后的restaurants状态，导致后续搜索范围被不断缩小。正确的做法是始终基于原始完整的餐厅列表进行过滤，而非当前展示的子集。

修改步骤： #

1. 保留原始餐厅列表副本：新增状态存储初始完整的餐厅数据，确保每次搜索都从完整数据源出发。
2. 基于原始列表执行过滤：调用过滤方法时传入原始列表，而非当前的restaurants状态。

修改后的完整代码： #

import { useState } from "react";
import { restaurantList } from "../constants";
import RestaurantCard from "./RestaurantCard";

function filterData(searchText, restaurants) {
  // 优化：忽略大小写，提升搜索容错性
  const lowerCaseSearch = searchText.toLowerCase();
  return restaurants.filter((restaurant) =>
    restaurant.data.name.toLowerCase().includes(lowerCaseSearch)
  );
}

const Body = () => {
  // 存储原始完整餐厅列表，初始化后不再修改
  const [originalRestaurants, setOriginalRestaurants] = useState(restaurantList);
  // 存储当前需要展示的过滤后列表
  const [restaurants, setRestaurants] = useState(restaurantList);
  const [searchText, setSearchText] = useState("");

  return (
    <>
      <div className="search-container">
        <input
          type="text"
          className="search-input"
          placeholder="Search"
          value={searchText}
          onChange={(e) => {
            setSearchText(e.target.value);
          }}
        />
        <button
          className="search-btn"
          onClick={() => {
            // 基于原始完整列表过滤数据
            const filteredData = filterData(searchText, originalRestaurants);
            setRestaurants(filteredData);
          }}
        >
          Search
        </button>
      </div>
      <div className="restaurant-list">
        {restaurants.map((fetchedData) => {
          return (
            <RestaurantCard {...fetchedData.data} key={fetchedData.data.id} />
          );
        })}
      </div>
    </>
  );
};

export default Body;

关键说明： #

• originalRestaurants仅在组件初始化时赋值，后续保持不变，始终作为完整的数据源。
• 每次搜索都从完整数据源中筛选结果，再将结果赋值给restaurants状态用于展示，避免了搜索范围被缩小的问题。
• 新增忽略大小写的处理，用户输入不同大小写的关键词都能匹配到结果，优化了搜索体验。

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