Problème de filtrage des données d'un ensemble de données en fonction de la saisie de l'utilisateur

Question

Voici un aperçu de ce que j'ai essayé jusqu'à présent :

1. J'ai un élément searchInput où l'utilisateur peut saisir sa requête de recherche.
2. J'utilise une fonction pour gérer le processus de filtrage lorsque la valeur de searchInput change.
3. La fonction de filtre parcourt l'ensemble de données et compare chaque élément à la valeur de searchInput pour déterminer s'il doit être affiché ou masqué. Cependant, lorsque je tape searchInput, les données restent les mêmes et le filtrage ne semble pas prendre effet.

Fonction de filtrage des données

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>
    </>
  );
};

format de données restrunList 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

Sur la base du code et de la description que vous avez fournis, cette approche semble généralement correcte, mais il existe un petit problème dans la façon dont elle gère la fonction de filtrage des données et les données du restaurant.

Le principal problème est la façon dont vous gérez le filtrage et la mise à jour du statut. Étant donné que les mises à jour d'état de React sont asynchrones et ne se produisent pas immédiatement après l'utilisation directe de searchText值来过滤restaurants可能无法得到预期的结果。状态更新可能在设置searchText, vous risquez d'obtenir des résultats filtrés incohérents ou obsolètes.

Pour résoudre ce problème, vous pouvez profiter de useEffect钩子在searchTextMettre à jour les données du filtre lorsqu'elles changent. De cette façon, la fonction de filtre fonctionnera toujours sur le dernier état. Voici le code mis à jour :

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;

Changements de code :

1. Nous avons modifié les noms des variables d'état de restaurants更改为filteredRestaurants pour éviter toute confusion entre les données brutes et filtrées.
2. Nous avons ajouté un useEffect钩子来处理searchTextfiltre sur le changement. Cela garantit des mises à jour correctes des données filtrées.

Maintenant, lorsque vous tapez dans la zone de saisie de recherche, le filtrage devrait prendre effet immédiatement et la liste des restaurants devrait être mise à jour en conséquence.