Berdasarkan kod dan perihalan yang anda berikan, pendekatan ini kebanyakannya kelihatan betul, tetapi terdapat masalah kecil dengan cara ia mengendalikan fungsi data penapis dan data restoran.

Isu utama ialah cara anda mengendalikan penapisan dan mengemas kini status. Memandangkan kemas kini keadaan React adalah tidak segerak dan tidak berlaku serta-merta selepas menggunakan searchText值来过滤restaurants可能无法得到预期的结果。状态更新可能在设置searchText secara langsung, anda mungkin mendapat hasil yang tidak konsisten atau lapuk yang ditapis.

Untuk menyelesaikan masalah ini, anda boleh memanfaatkan useEffect钩子在searchTextKemas kini data penapis apabila ia berubah. Dengan cara ini fungsi penapis akan sentiasa beroperasi pada keadaan terkini. Berikut ialah kod yang dikemas kini:

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;

Perubahan dalam kod:

1. Kami menukar nama pembolehubah keadaan daripada restaurants更改为filteredRestaurants untuk mengelakkan kekeliruan antara data mentah dan data yang ditapis.
2. Kami menambah useEffect钩子来处理searchTextpenapis pada perubahan. Ini memastikan kemas kini yang betul bagi data yang ditapis.

Kini apabila anda menaip dalam kotak input carian, penapisan harus berkuat kuasa serta-merta dan senarai restoran harus dikemas kini dengan sewajarnya.