Based on the code and description you provided, this approach looks mostly correct, but there is a small issue with the way the filter data function and restaurant data are handled.

The main problem is how you handle filtering and updating status. Since React's status updates are asynchronous, directly using the searchText value to filter restaurants may not yield the expected results. Status updates may not happen immediately after setting searchText, so you may get inconsistent or stale filtered results.

To solve this problem, you can utilize the useEffect hook to update the filtered data when searchText changes. This way the filter function will always operate on the latest state. Here is the updated code:

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;

Changes in code:

1. We changed the status variable name from restaurants to filteredRestaurants to avoid confusion between raw and filtered data.
2. We added a useEffect hook to handle filtering when searchText changes. This ensures correct updates of filtered data.

Now, as you type in the search input box, the filtering should take effect immediately and the restaurant list should be updated accordingly.