React Select选择后无法切换选项及汽车列表筛选状态异常问题

核心问题分析 #

1. 页面初始无车辆展示：异步获取数据时，applyFilters执行时机过早，此时carsList尚未拿到接口数据，导致updatedCarsList被设为空数组；同时useEffect未监听carsList变化，数据加载完成后也不会自动更新筛选结果。
2. React Select无法切换选项：筛选组件未将选中状态与selectedMake绑定，导致选择后状态不同步，无法触发后续筛选或切换。

修复后代码 #

CarOffers.jsx #

import { useState, useEffect } from 'react';
import axios from 'axios';
import CarSlider from './CarSlider';
import DisplayCars from './DisplayCars';
import SortingCars from './SortingCars';
import CarAlignment from './CarAlignment';
import Search from './Search';
import FilterSideBar from './FilterSideBar';
import Cars from './Cars';

const CarOffers = () => {
    const [carsList, setCarsList] = useState([]);
    const [updatedCarsList, setUpdatedCarsList] = useState([]);
    const [selectedMake, setSelectedMake] = useState(undefined);

    const getCars = () => {
        axios.get(url)
            .then((response) => {
                setCarsList(response.data);
            })
            .catch(err => {
                console.error('获取车辆数据失败:', err);
            });
    };

    const handleMakeChange = (select) => {
        // 兼容清空选择的场景
        setSelectedMake(select?.value ?? undefined);
    };

    const applyFilters = () => {
        if (!carsList.length) return;
        
        // 根据选中品牌筛选，无选中时返回完整列表
        const filteredList = selectedMake 
            ? carsList.filter(car => car.make === selectedMake)
            : [...carsList];
        setUpdatedCarsList(filteredList);
    };

    // 仅页面加载时获取一次数据
    useEffect(() => {
        getCars();
    }, []);

    // 数据或筛选条件变化时自动执行筛选
    useEffect(() => {
        applyFilters();
    }, [carsList, selectedMake]);

    return (
        <div className="mka__wrapper-car-offers">
            <div className="mka__container">
                <div className="mka__content-car-offers">
                    <div className="mka__content-grid-offers">
                        <div className="item1">
                            <CarSlider />
                            <div className="mka-responsive-item">
                                <DisplayCars />
                                <SortingCars />
                                <CarAlignment />
                            </div>
                        </div>
                        <div className="item2">
                            <div className="mka__side-bar-divider">
                                <Search carsList={carsList} />
                            </div>
                            <div>
                                <FilterSideBar 
                                    carsList={carsList}
                                    selectedMake={selectedMake}
                                    handleMakeChange={handleMakeChange} 
                                />
                            </div>
                        </div>
                        <div className="item3">
                            <Cars updatedCarsList={updatedCarsList} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default CarOffers;

FilterSideBar.jsx（补充必要的Select绑定逻辑） #

import Select from 'react-select';

const FilterSideBar = ({ carsList, selectedMake, handleMakeChange }) => {
    // 生成去重后的品牌选项
    const makeOptions = [...new Set(carsList.map(car => car.make))].map(make => ({
        value: make,
        label: make
    }));

    return (
        <div>
            <Select
                value={makeOptions.find(opt => opt.value === selectedMake)}
                onChange={handleMakeChange}
                options={makeOptions}
                placeholder="选择品牌"
                isClearable // 允许清空选择
            />
        </div>
    );
};

export default FilterSideBar;

关键修复点 #

• 分离数据获取与筛选逻辑，确保数据加载完成后再初始化展示列表。
• 新增carsList依赖监听，数据更新或筛选条件变化时自动重新筛选。
• 完善handleMakeChange逻辑，兼容清空选择的场景。
• 在React Select组件中绑定value属性，确保选中状态与组件状态同步，解决无法切换选项的问题。

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