为什么我在 React 中的过滤器 function 不起作用？

Question

Hi im trying to add a filter option.I have a list of Restaurant cards....each card has category either alc,coffeeshop or bar. I wanted to add a filter where in I can choose all option and get all restaurants..and if i choose any of the category then those restos.Here is what I have written although not working whats going wrong? Restaurants.js

import MyMap from "./MyMap";
import Rcard from "./Rcard";
import Filter from "./Filter";

import { useEffect, useState } from "react";
function Restaurants(){
    const[restaurants,setRestaurants]=useState([]);
    const[filter,setFilter]=useState("");
    useEffect(()=>{
        fetch('/restaurants')
        .then(res=>res.json())
        .then(rdata=>{
            setRestaurants(rdata)
        })
    },[])

    function handleFilter(e) {
        e.target.value === "All"
          ? setFilter("")
          : setFilter(e.target.value);
      }
    
      let displayRestaurants = restaurants;
      if (filter) {
        displayRestaurants = displayRestaurants.filter((r) => {
          return r.type >= filter;
        });
      }
     
    return(
        <>
   
        <MyMap />
        <h1>Restos</h1>
        <Filter  handleFilter={handleFilter}/>
        
        {
            restaurants.map((restaurant)=>(
                <Rcard key={restaurant.id} restaurant={restaurant}/>
            ))
        }

        </>
    )
}
export default Restaurants;

Filter.js

function Filter(handleFilter){
    return(
        <>
        <div>
      <h4> Filter </h4>
      <select
       onChange={handleFilter}
     
      >
        <option>All</option>
        <option value="alc">Fine Dinning</option>
        <option value="coffeeshop">Cafe</option>
        <option value="bar">Pub</option>
        
      </select>
    </div>
        </>
    )
}
export default Filter;

Rcard.js

function Rcard({restaurant}){
    const{ id,name, cuisine,image, cost, address, hours, closed, phone, must_try, category,website}=restaurant;
    return(
        <>
        <img src={image } alt="pic"/>
        <h2>{name}</h2>
        <h3>{cuisine}</h3>
        <h3>{cost}</h3>
        <h3>{address}</h3>
        <h3>{hours}</h3>
        <h3>{closed}</h3>
        <h4>{phone}</h4>
        <h4>{must_try}</h4>
        <h4>{category}</h4>
        <a href={`/restaurants/${id}`}>View</a>
        <a href={website} target="_blank"  rel="noreferrer"  >Website</a>
        
        </>
    )
}
export default Rcard;

Thanks

Answer 1

1. You need to check if the filters are applied and this can be done inside the useEffect with the filter as dep array...

    useEffect(()=>{ const filtered = restaurants.filter((r) => { return r.type == filter; // check the condition here }) setRestaurants(filtered) },[filter])

2. or we can even derive from the state as

    const filtered = restaurants.filter((r) => { return r.type == filter; // check the condition here })

   use this filtered to map and render

   filtered.map((restaurant)=>( <Rcard key={restaurant.id} restaurant={restaurant}/> ))