React中如何通过下拉选项筛选本地JSON数据并重新渲染车辆列表

第一步：修正FilterBrand组件的传值逻辑 #

你当前代码里下拉选项的value存的是品牌去重后数组的下标，无法用于后续匹配原始数据，先调整这部分，也可以同时加「全部品牌」选项方便回到全量列表：

export const FilterBrand = (props) => {
  // 用Set做品牌去重比原有filter写法更简洁
  const brands = [...new Set(props.list.map((vehicle) => vehicle.brand))];

  return (
    <select onChange={(e) => props.handleChange(e.target.value)}>
      <option value="">全部品牌</option>
      {brands.map((brand, key) => (
        <option key={key} value={brand}>
          {brand}
        </option>
      ))}
    </select>
  );
};

第二步：主应用新增状态驱动列表渲染 #

你需要在主应用中维护全量原始数据、选中品牌两个核心变量，通过状态变化自动触发筛选和重渲染：

import { useState, useMemo } from 'react';
// 替换为你本地JSON文件的实际导入路径
import originalList from './xxx/vehicleData.json';

function App() {
  // 存储当前选中的筛选品牌，默认空值代表展示全部
  const [selectedBrand, setSelectedBrand] = useState('');
  // 存储全量原始数据，固定不修改，所有筛选都基于该数据源避免数据丢失
  const [fullList] = useState(originalList);

  // 依赖选中品牌和全量数据自动计算需要渲染的列表
  const renderList = useMemo(() => {
    if (!selectedBrand) return fullList;
    return fullList.filter(item => item.brand === selectedBrand);
  }, [selectedBrand, fullList]);

  return (
    <div>
      <div className="filter-brand">
        <FilterBrand
          list={fullList}
          handleChange={(brand) => setSelectedBrand(brand)}
        />
      </div>
      {/* 原有渲染全量列表的位置替换为渲染renderList即可 */}
      <div className="vehicle-list">
        {renderList.map((vehicle, index) => (
          <div key={index} className="vehicle-item">
            <p>品牌：{vehicle.brand}</p>
            <p>型号：{vehicle.model}</p>
            <p>价格：{vehicle.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

整体逻辑走React状态驱动渲染的规则：每次下拉选择更新selectedBrand状态后，useMemo会自动重新计算筛选后的列表，列表数据变化就会触发视图自动重渲染，不需要手动操作DOM。

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