Problème de filtrage des données d'un ensemble de données en fonction de la saisie de l'utilisateur-Questions et réponses sur le réseau chinois PHP

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

J'ai un élément searchInput où l'utilisateur peut saisir sa requête de recherche.
J'utilise une fonction pour gérer le processus de filtrage lorsque la valeur de searchInput change.
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 ( <>   { setSearchText(e.target.value); }} />  
 //UI  {restruntList.map((restaurant) => { return ; })} 
  ); };

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, } } ]

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 ( <>

setSearchText(e.target.value)} />

{filteredRestaurants.map((restaurant) => ( ))}

); }; export default Body;

répondre à tous (1)

P粉8659009942023-09-21 00:18:34 1 plancher

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 desearchText值来过滤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 deuseEffect钩子在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 ( <>   setSearchText(e.target.value)} /> 
  {filteredRestaurants.map((restaurant) => (  ))} 
  ); }; export default Body;

Changements de code :

Nous avons modifié les noms des variables d'état derestaurants更改为filteredRestaurantspour éviter toute confusion entre les données brutes et filtrées.
Nous avons ajouté unuseEffect钩子来处理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.