React餐厅分类过滤功能失效问题排查求助

这里列出代码中导致过滤失效的三个核心问题，以及对应的修复方法：

问题1：Filter组件接收props方式错误 #

Filter组件的参数是props对象，直接写handleFilter会把整个props对象当成回调函数，导致下拉选择时无法触发过滤逻辑。

修复：
通过解构语法接收handleFilter属性：

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

同时给「All」选项加上value="All"，确保e.target.value能准确匹配判断条件。

问题2：过滤逻辑错误 #

你需要匹配的是餐厅的category字段，但代码中错误使用了r.type；并且用了字符串大小比较符>=，这不是判断分类匹配的正确方式。

修复：
在Restaurants.js的过滤逻辑中，改为匹配category字段，并用严格相等===判断：

// Restaurants.js 中过滤部分修改后
let displayRestaurants = restaurants;
if (filter) {
  displayRestaurants = displayRestaurants.filter((r) => {
    return r.category === filter;
  });
}

问题3：渲染的是原始数组而非过滤后的数组 #

代码中虽然计算了过滤后的displayRestaurants，但渲染时依然使用原始的restaurants数组，导致过滤结果无法展示。

修复：
将渲染部分改为使用displayRestaurants：

// Restaurants.js 渲染部分修改后
{
  displayRestaurants.map((restaurant)=>(
      <Rcard key={restaurant.id} restaurant={restaurant}/>
  ))
}

完整修复后的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.category === filter;
        });
      }
     
    return(
        <>
   
        <MyMap />
        <h1>Restos</h1>
        <Filter handleFilter={handleFilter}/>
        
        {
            displayRestaurants.map((restaurant)=>(
                <Rcard key={restaurant.id} restaurant={restaurant}/>
            ))
        }

        </>
    )
}
export default Restaurants;

内容的提问来源于stack exchange，提问作者codertraveller