根據使用者輸入從資料集中篩選資料的問題

Question

以下是我迄今為止嘗試過的概述：

1. 我有一個searchInput元素，使用者可以在其中輸入他們的搜尋查詢。
2. 當searchInput的值改變時，我使用一個函數來處理篩選過程。
3. 過濾函數循環遍歷資料集，並將每個項目與searchInput的值進行比較，以確定是否應該顯示或隱藏。 然而，當我在searchInput中輸入時，資料保持不變，過濾似乎沒有生效。

過濾資料函數

function filterData(searchText, restaurants) {
  const filterData = restaurants.filter((restaurant) =>
    restaurant.info.name.includes(searchText)
  );
  return filterData;
}

import { restruntList } from "../constants"; // JSON数据

const Body = () => {
  const [searchText, setSearchText] = useState("");
  const [restaurants, setRestaurants] = useState(restruntList);

  return (
    <>
      <div className="search-container">
        <input
          type="text"
          className="search-input"
          placeholder="搜索"
          value={searchText}
          onChange={(e) => {
            setSearchText(e.target.value);
          }}
        />
        <button
          className="search-btn"
          onClick={() => {
            //过滤数据
            const data = filterData(searchText, restaurants);

            //更新状态 - restaurant变量
            setRestaurants(data);
          }}
        >
          搜索{" "}
        </button>
      </div>
      //UI
      <div className="restrunt-list">
        {restruntList.map((restaurant) => {
          return <RestruntCard {...restaurant.info} key={restaurant.info.id} />;
        })}
      </div>
    </>
  );
};

restruntList JSON資料格式

export const restruntList = [
  {
    info: {
      id: "23719",
      name: "麦当劳",
      cloudinaryImageId: "ee5f8e06b300efc07c9fe3f4df40dfc4",
      locality: "JM Road",
      areaName: "Shivajinagar",
      costForTwo: "₹400 for two",
      cuisines: ["汉堡", "饮料", "咖啡馆", "甜点"],
      avgRating: 4.3,
     }
  }
]

Answer 1

根據您提供的程式碼和描述，這種方法看起來大部分是正確的，但在處理過濾資料函數和餐廳資料的方式上存在一個小問題。

主要問題在於您如何處理過濾和更新狀態。由於React的狀態更新是異步的，直接使用searchText值來過濾restaurants可能無法得到預期的結果。狀態更新可能在設定searchText後沒有立即發生，因此您可能會得到不一致或過時的篩選結果。

為了解決這個問題，您可以利用useEffect鉤子在searchText更改時更新過濾資料。這樣，過濾函數將始終操作最新的狀態。以下是更新後的程式碼：

import React, { useState, useEffect } from 'react';
import { restruntList } from '../constants';

function filterData(searchText, restaurants) {
  const filteredData = restaurants.filter((restaurant) =>
    restaurant.info.name.toLowerCase().includes(searchText.toLowerCase())
  );
  return filteredData;
}

const Body = () => {
  const [searchText, setSearchText] = useState('');
  const [filteredRestaurants, setFilteredRestaurants] = useState(restruntList);

  useEffect(() => {
    const data = filterData(searchText, restruntList);
    setFilteredRestaurants(data);
  }, [searchText]);

  return (
    <>
      <div className="search-container">
        <input
          type="text"
          className="search-input"
          placeholder="搜索"
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
        />
      </div>
      <div className="restaurant-list">
        {filteredRestaurants.map((restaurant) => (
          <RestruntCard {...restaurant.info} key={restaurant.info.id} />
        ))}
      </div>
    </>
  );
};

export default Body;

程式碼中的變更：

1. 我們將狀態變數名稱從restaurants改為filteredRestaurants，以避免原始資料和過濾資料之間的混淆。
2. 我們新增了一個useEffect鉤子來處理searchText更改時的篩選。這確保了過濾資料的正確更新。

現在，當您在搜尋輸入框中輸入時，過濾應立即生效，並相應地更新餐廳清單。