根据用户输入从数据集中筛选数据的问题-PHP中文网问答

以下是我迄今为止尝试过的概述：

我有一个searchInput元素，用户可以在其中输入他们的搜索查询。
当searchInput的值发生变化时，我使用一个函数来处理过滤过程。
过滤函数循环遍历数据集，并将每个项与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 ( <>   { setSearchText(e.target.value); }} />  
 //UI  {restruntList.map((restaurant) => { return ; })} 
  ); };

restruntList 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;

全部回复 (1)

P粉8659009942023-09-21 00:18:34 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 ( <>   setSearchText(e.target.value)} /> 
  {filteredRestaurants.map((restaurant) => (  ))} 
  ); }; export default Body;

代码中的更改：