React中基于Autocomplete选中值实现车辆卡片过滤的问题

1. 新增选中品牌状态 #

在主组件中用useState维护选中的品牌：

const [selectedBrand, setSelectedBrand] = useState(null);

2. 关联Autocomplete的选择动作 #

修改Autocomplete组件，将选择事件绑定到状态更新函数，确保选中品牌时同步状态：

<Autocomplete
  // 保留原有配置属性
  onChange={(event, newValue) => setSelectedBrand(newValue)}
  value={selectedBrand} // 绑定选中值，保证组件状态一致性
/>

3. 编写过滤逻辑 #

基于选中的品牌对车辆数据进行过滤（假设车辆数据存储在vehicles变量中，每个车型对象包含brand字段）：

const filteredVehicles = selectedBrand 
  ? vehicles.filter(car => car.brand === selectedBrand)
  : vehicles; // 未选中品牌时展示全部车型

4. 渲染过滤后的卡片 #

将过滤后的数据传入卡片容器组件：

<VehicleCardContainer vehicles={filteredVehicles} />

5. 调整卡片容器组件 #

确保卡片容器接收vehicles属性，并遍历渲染对应卡片：

function VehicleCardContainer({ vehicles }) {
  return (
    <div className="card-container">
      {vehicles.map(car => (
        <VehicleCard key={car.id} vehicle={car} />
      ))}
    </div>
  );
}

• 性能优化：若车辆数据量较大，使用useMemo缓存过滤结果，避免每次渲染重复执行过滤逻辑：

  const filteredVehicles = useMemo(() => {
    return selectedBrand 
      ? vehicles.filter(car => car.brand === selectedBrand)
      : vehicles;
  }, [selectedBrand, vehicles]); // 仅当依赖项变化时重新过滤
  

• 空状态处理：过滤后无匹配车型时，显示友好的空状态提示：

  {filteredVehicles.length === 0 ? (
    <div className="empty-state">暂无该品牌的车型</div>
  ) : (
    <VehicleCardContainer vehicles={filteredVehicles} />
  )}
  

• Autocomplete体验优化：若品牌选项较多，开启freeSolo允许用户输入搜索，同时从车辆数据中提取唯一品牌作为选项：

  // 提取不重复的品牌列表
  const brandOptions = useMemo(() => [...new Set(vehicles.map(car => car.brand))], [vehicles]);
  
  <Autocomplete
    options={brandOptions}
    freeSolo
    // 保留原有配置属性
  />
  

• 类型安全：使用TypeScript时，为状态、组件属性添加类型定义，减少潜在的类型错误。

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