React对接MongoDB开发：选中汽车品牌后仅展示对应年份如何实现

要实现选中品牌后仅展示对应年份的效果，需要对后端接口和前端逻辑做对应调整，以下是具体实现步骤：

1. 后端接口改造 #

原有接口仅支持返回全量车辆数据，我们需要新增品牌查询参数，支持按需返回指定品牌的车辆数据：

carRoutes.route('/').get(function(req, res) {
    // 构造查询条件：请求传了brand参数就按品牌筛选，否则查询全部数据
    const query = req.query.brand ? { car_description: req.query.brand } : {};
    Car.find(query, function(err, car) {
        if(err) {
            console.log(err);
            res.status(500).send(err);
        } else{
            res.json(car);
        }
    }).collation().sort({car_description:1});
}); 

2. 前端逻辑实现 #

提供两种实现方案，可根据你的数据量选择：

方案A：前端全量过滤（适合数据量较小的场景，无需多次请求接口） #

首次请求拉取全量车辆数据存在本地，选中品牌后直接在前端过滤出对应年份：

import { useState, useEffect } from 'react';

function CarSelector() {
  // 存储全量车辆数据
  const [allCars, setAllCars] = useState([]);
  // 选中的品牌
  const [selectedBrand, setSelectedBrand] = useState('');
  // 品牌下拉选项
  const [brandOptions, setBrandOptions] = useState([]);
  // 年份下拉选项
  const [yearOptions, setYearOptions] = useState([]);

  // 页面初始化时拉取全量数据
  useEffect(() => {
    fetch('/api/car')
      .then(res => res.json())
      .then(data => {
        setAllCars(data);
        // 提取去重后的品牌列表填充品牌下拉
        const brands = [...new Set(data.map(item => item.car_description))];
        setBrandOptions(brands);
      })
  }, []);

  // 监听品牌选择变化，过滤对应年份
  useEffect(() => {
    if (!selectedBrand) {
      setYearOptions([]);
      return;
    }
    // 筛选出选中品牌的所有车辆数据，提取年份去重后填充年份下拉
    const matchedCars = allCars.filter(item => item.car_description === selectedBrand);
    const years = [...new Set(matchedCars.map(item => item.car_year))];
    setYearOptions(years);
  }, [selectedBrand, allCars]);

  return (
    <div>
      {/* 品牌选择下拉 */}
      <select value={selectedBrand} onChange={e => setSelectedBrand(e.target.value)}>
        <option value="">请选择品牌</option>
        {brandOptions.map(brand => <option key={brand} value={brand}>{brand}</option>)}
      </select>
      {/* 年份选择下拉 */}
      <select>
        <option value="">请选择年份</option>
        {yearOptions.map(year => <option key={year} value={year}>{year}</option>)}
      </select>
    </div>
  )
}

方案B：按需请求接口（适合数据量较大的场景，减少前端数据处理压力） #

选中品牌后携带品牌参数请求后端接口，仅拉取对应品牌的数据生成年份选项：

import { useState, useEffect } from 'react';

function CarSelector() {
  const [selectedBrand, setSelectedBrand] = useState('');
  const [brandOptions, setBrandOptions] = useState([]);
  const [yearOptions, setYearOptions] = useState([]);

  // 初始化拉取全量品牌列表
  useEffect(() => {
    fetch('/api/car')
      .then(res => res.json())
      .then(data => {
        const brands = [...new Set(data.map(item => item.car_description))];
        setBrandOptions(brands);
      })
  }, []);

  // 监听品牌选择变化，请求对应品牌的年份数据
  useEffect(() => {
    if (!selectedBrand) {
      setYearOptions([]);
      return;
    }
    // 携带选中的品牌参数请求接口
    fetch(`/api/car?brand=${encodeURIComponent(selectedBrand)}`)
      .then(res => res.json())
      .then(data => {
        const years = [...new Set(data.map(item => item.car_year))];
        setYearOptions(years);
      })
  }, [selectedBrand]);

  return (
    <div>
      <select value={selectedBrand} onChange={e => setSelectedBrand(e.target.value)}>
        <option value="">请选择品牌</option>
        {brandOptions.map(brand => <option key={brand} value={brand}>{brand}</option>)}
      </select>
      <select>
        <option value="">请选择年份</option>
        {yearOptions.map(year => <option key={year} value={year}>{year}</option>)}
      </select>
    </div>
  )
}

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