React省份选择器筛选诊所列表失效问题求助

问题根源及修复点 #

1. 选项Value设置错误
   所有省份选项的value绑定了状态值filterSelectClinic，导致选择时无法传递正确的省份名称。需将每个option的value改为对应省份的文本内容，且无需给每个option单独绑定onChange事件（父级Form.Select已绑定）。

2. 缺失"Todos"选项逻辑
   当前筛选函数未处理"显示全部"的场景，选择"Todos"时会过滤掉所有结果。需在筛选逻辑中判断，若选择"todos"则直接返回完整诊所列表。

3. 类型定义语法错误
   clinicListFilteredSelect的类型声明存在语法错误：useState<Clinic[>([])，需修正为useState<Clinic[]>([])。

4. 优化筛选触发逻辑
   将筛选逻辑改为监听filterSelectClinic状态变化自动触发，避免同步调用可能带来的异步状态问题。

修正后的完整代码 #

import React, { useState, useEffect } from 'react'
import Form from 'react-bootstrap/Form';
import { getClinic } from '../../api/drupalAPI'
import {Clinic} from '@icofcv/common';

export const SearchFilterClinics = () => {
    const [clinicList, setClinicList] = useState<Clinic[]>([]);
    const [clinicListFilteredSelect, setClinicListFilteredSelect] = useState<Clinic[]>([]);
    const [filterSelectClinic, setFilterSelectClinic] = useState("");

    const fetchClinicList = async () => {
        try {
            const response = await getClinic();
            setClinicList(response);
            setClinicListFilteredSelect(response);
        } catch (error) {
            console.error(error);
            throw error;
        }
    }

    // 监听筛选值变化，自动触发筛选
    useEffect(() => {
        if (!clinicList.length) return;
        
        if (filterSelectClinic === "todos") {
            setClinicListFilteredSelect(clinicList);
            return;
        }

        const resultFilterSelect = clinicList.filter(element => 
            element.province?.toString().toLowerCase().includes(filterSelectClinic.toLowerCase())
        );
        setClinicListFilteredSelect(resultFilterSelect);
    }, [filterSelectClinic, clinicList]);

    useEffect(() => {
        fetchClinicList();  
    }, []);

    return  (
        <>
            <div>
                <Form.Label htmlFor="text">Provincia</Form.Label>
                <Form.Select 
                    aria-label="provincias"  
                    onChange={(e) => setFilterSelectClinic(e.target.value)}
                    value={filterSelectClinic}
                >
                    <option data-postal="00" value="todos">Todos</option>
                    <option data-postal="01" value="Alava/Araba">Alava/Araba</option>
                    <option data-postal="02" value="Albacete">Albacete</option>
                    <option data-postal="03" value="Alicante">Alicante</option>
                    <option data-postal="04" value="Almería">Almería</option>
                    <option data-postal="05" value="Avila">Avila</option>
                    <option data-postal="06" value="Badajoz">Badajoz</option>
                    <option data-postal="07" value="Islas Baleares">Islas Baleares</option>
                    <option data-postal="08" value="Barcelona">Barcelona</option>
                    <option data-postal="09" value="Burgos">Burgos</option>
                    <option data-postal="10" value="Cáceres">Cáceres</option>
                    <option data-postal="11" value="Cádiz">Cádiz</option>
                    <option data-postal="12" value="Castellón">Castellón</option>
                    <option data-postal="13" value="Ciudad Real">Ciudad Real</option>
                    <option data-postal="14" value="Córdoba">Córdoba</option>
                    <option data-postal="15" value="A Coruña/La Coruña">A Coruña/La Coruña</option>
                    <option data-postal="16" value="Cuenca">Cuenca</option>
                    <option data-postal="17" value="Gerona/Girona">Gerona/Girona</option>
                    <option data-postal="18" value="Granada">Granada</option>
                    <option data-postal="19" value="Guadalajara">Guadalajara</option>
                    <option data-postal="20" value="Gipuzkoa/Guipuzcoa">Gipuzkoa/Guipuzcoa</option>
                    <option data-postal="21" value="Huelva">Huelva</option>
                    <option data-postal="22" value="Huesca">Huesca</option>
                    <option data-postal="23" value="Jaen">Jaen</option>
                    <option data-postal="24" value="León">León</option>
                    <option data-postal="25" value="Lérida/Lleida">Lérida/Lleida</option>
                    <option data-postal="26" value="La Rioja">La Rioja</option>
                    <option data-postal="27" value="Lugo">Lugo</option>
                    <option data-postal="28" value="Madrid">Madrid</option>
                    <option data-postal="29" value="Málaga">Málaga</option>
                    <option data-postal="30" value="Murcia">Murcia</option>
                    <option data-postal="31" value="Navarra">Navarra</option>
                    <option data-postal="32" value="Orense/Ourense">Orense/Ourense</option>
                    <option data-postal="33" value="Asturias">Asturias</option>
                    <option data-postal="34" value="Palencia">Palencia</option>
                    <option data-postal="35" value="Las Palmas">Las Palmas</option>
                    <option data-postal="36" value="Pontevedra">Pontevedra</option>
                    <option data-postal="37" value="Salamanca">Salamanca</option>
                    <option data-postal="38" value="S.C.Tenerife">S.C.Tenerife</option>
                    <option data-postal="39" value="Cantabria">Cantabria</option>
                    <option data-postal="40" value="Segovia">Segovia</option>
                    <option data-postal="41" value="Sevilla">Sevilla</option>
                    <option data-postal="42" value="Soria">Soria</option>
                    <option data-postal="43" value="Tarragona">Tarragona</option>
                    <option data-postal="44" value="Teruel">Teruel</option>
                    <option data-postal="45" value="Toledo">Toledo</option>
                    <option data-postal="46" value="Valencia">Valencia</option>
                    <option data-postal="47" value="Valladolid">Valladolid</option>
                    <option data-postal="48" value="Bizkaia/Vizcaya">Bizkaia/Vizcaya</option>
                    <option data-postal="49" value="Zamora">Zamora</option>
                    <option data-postal="50" value="Zaragoza">Zaragoza</option>
                    <option data-postal="51" value="Ceuta">Ceuta</option>
                    <option data-postal="52" value="Melilla">Melilla</option>
                </Form.Select>

                <div>RESULT</div>
                {
                    clinicListFilteredSelect.map((clinic, index) => (
                        <div key={index}>
                            <div>{clinic.title}</div>
                            <div>{clinic.propsPhone}</div>
                            <div>{clinic.mobile}</div>
                            <div>{clinic.email}</div>
                            <div>{clinic.province} </div>
                            <div>{clinic.registry}</div>
                        </div>
                    ))
                }
            </div>
        </>
    )
}

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