以下是我迄今為止嘗試過的概述：
過濾資料函數
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,
}
}
] 
根據您提供的程式碼和描述，這種方法看起來大部分是正確的，但在處理過濾資料函數和餐廳資料的方式上存在一個小問題。
主要問題在於您如何處理過濾和更新狀態。由於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;程式碼中的變更：
restaurants改為filteredRestaurants，以避免原始資料和過濾資料之間的混淆。useEffect鉤子來處理searchText更改時的篩選。這確保了過濾資料的正確更新。現在，當您在搜尋輸入框中輸入時，過濾應立即生效，並相應地更新餐廳清單。