如何展示并应用房产筛选器（含排序、价格、房间数等过滤条件）

一、展示筛选器 #

基于你提供的filterDataBuy配置，我们可以用React状态管理渲染筛选组件，以下是完整实现：

import { useState } from 'react';
import { filterDataBuy } from './你的文件路径';

function PropertyFilters({ onFilterChange }) {
  // 初始化筛选值状态
  const [localFilters, setLocalFilters] = useState({
    minPrice: '',
    maxPrice: '',
    sort: '',
    roomsMin: '',
    bathsMin: ''
  });

  // 处理筛选值变化
  const handleChange = (queryName, value) => {
    const newFilters = { ...localFilters, [queryName]: value };
    setLocalFilters(newFilters);
    // 将筛选值传递给父组件
    onFilterChange(newFilters);
  };

  return (
    <div style={{ display: 'flex', gap: '1rem', padding: '1rem' }}>
      {filterDataBuy.map((filter, index) => (
        <select
          key={index}
          value={localFilters[filter.queryName]}
          onChange={(e) => handleChange(filter.queryName, e.target.value)}
          style={{ padding: '0.5rem', minWidth: '150px' }}
        >
          <option value="">{filter.placeholder}</option>
          {filter.items.map((item) => (
            <option key={item.value} value={item.value}>
              {item.name}
            </option>
          ))}
        </select>
      ))}
    </div>
  );
}

export default PropertyFilters;

这段代码会自动遍历filterDataBuy生成所有下拉筛选框，选中值同步到状态并传递给父组件。

二、实现数据过滤与排序 #

先处理原始数据的格式转换，再根据筛选条件过滤并排序：

1. 工具函数：转换数据格式 #

把字符串格式的数值转为可计算的数字：

// 处理价格：去掉$和.，转成数字
const parsePrice = (priceStr) => {
  return Number(priceStr.replace(/[$.]/g, ''));
};

// 处理房间/浴室数：提取数字部分
const parseRoomCount = (countStr) => {
  return Number(countStr.split(' ')[0]);
};

2. 过滤与排序主逻辑 #

在父组件中整合筛选器和数据展示：

import { useState, useEffect } from 'react';
import PropertyFilters from './PropertyFilters';
import PropertyData from './PropertyData';

function PropertyList() {
  const [filteredProperties, setFilteredProperties] = useState(PropertyData);
  const [currentFilters, setCurrentFilters] = useState({});

  useEffect(() => {
    let result = [...PropertyData];

    // 只保留售卖类型的房产
    result = result.filter(item => item.listingType === 'Buy');

    // 价格筛选
    if (currentFilters.minPrice) {
      const minPrice = Number(currentFilters.minPrice);
      result = result.filter(item => parsePrice(item.price) >= minPrice);
    }
    if (currentFilters.maxPrice) {
      const maxPrice = Number(currentFilters.maxPrice);
      result = result.filter(item => parsePrice(item.price) <= maxPrice);
    }

    // 房间数筛选
    if (currentFilters.roomsMin) {
      const minRooms = Number(currentFilters.roomsMin);
      result = result.filter(item => parseRoomCount(item.bedrooms) >= minRooms);
    }

    // 浴室数筛选
    if (currentFilters.bathsMin) {
      const minBaths = Number(currentFilters.bathsMin);
      result = result.filter(item => parseRoomCount(item.bath) >= minBaths);
    }

    // 排序逻辑
    if (currentFilters.sort) {
      switch (currentFilters.sort) {
        case 'price-asc':
          result.sort((a, b) => parsePrice(a.price) - parsePrice(b.price));
          break;
        case 'price-des':
          result.sort((a, b) => parsePrice(b.price) - parsePrice(a.price));
          break;
        // 若后续添加日期字段，可补充以下逻辑
        // case 'date-asc':
        //   result.sort((a, b) => new Date(a.date) - new Date(b.date));
        //   break;
        // case 'date-desc':
        //   result.sort((a, b) => new Date(b.date) - new Date(a.date));
        //   break;
        default:
          break;
      }
    }

    setFilteredProperties(result);
  }, [currentFilters]);

  return (
    <div>
      <PropertyFilters onFilterChange={setCurrentFilters} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '1rem', padding: '1rem' }}>
        {filteredProperties.map((property) => (
          <div key={property.id} style={{ border: '1px solid #eee', padding: '1rem', borderRadius: '8px' }}>
            <img src={property.image} alt={property.heading} style={{ width: '100%', height: '200px', objectFit: 'cover' }} />
            <h3>{property.heading}</h3>
            <p>{property.price}</p>
            <p>{property.bedrooms} | {property.bath}</p>
            <p>{property.address}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default PropertyList;

关键说明 #

• 价格处理：针对样本数据的$1.000.000格式，通过正则去掉特殊字符转成纯数字，方便数值比较
• 条件过滤：仅当筛选值存在时才应用对应规则，避免空值干扰结果
• 排序扩展：若后续给房产数据添加日期字段，可直接补充日期排序的逻辑分支

内容的提问来源于stack exchange，提问作者Its.Chelle