React组件优化：实现仅展示省份筛选后的诊所列表

要实现需求，需要调整组件的状态控制和初始逻辑，核心修改点如下：

• 添加状态控制是否已选择省份，初始隐藏诊所列表
• 初始不预填充筛选后的诊所列表，仅在用户选择省份后执行筛选并展示
• 调整数据加载后的处理逻辑，避免初始显示全部诊所

以下是修改后的完整代码：

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

export const SearchFilterClinics = () => {
  type OptionType = {
    value: string;
    label: string;
  };

  const provincesList: OptionType[] = [
    { value: 'Todos', label: 'Todos' },
    { value: 'Alava/Araba', label: 'Alava/Araba' },
    { value: 'Albacete', label: 'Albacete' },
    { value: 'Alicante', label: 'Alicante' },
    { value: 'Almería', label: 'Almería' },
    { value: 'Avila', label: 'Avila' },
    { value: ' Badajoz', label: ' Badajoz' },
    { value: 'Islas Baleares', label: 'Islas Baleares' },
    { value: 'Barcelona', label: 'Barcelona' },
    { value: 'Burgos', label: 'Burgos' },
    { value: 'Cáceres', label: 'Cáceres' },
    { value: 'Cádiz', label: 'Cádiz' },
    { value: 'Castellón', label: 'Castellón' },
    { value: 'Ciudad Real', label: 'Ciudad Real' },
    { value: 'Córdoba', label: 'Córdoba' },
    { value: 'A Coruña/La Coruña', label: 'A Coruña/La Coruña' },
    { value: 'Cuenca', label: 'Cuenca' },
    { value: 'Gerona/Girona', label: 'Gerona/Girona' },
    { value: 'Granada', label: 'Granada' },
    { value: 'Guadalajara', label: 'Guadalajara' },
    { value: 'Gipuzkoa/Guipuzcoa', label: 'Gipuzkoa/Guipuzcoa' },
    { value: 'Huelva', label: 'Huelva' },
    { value: 'Huesca', label: 'Huesca' },
    { value: 'Jaen', label: 'Jaen' },
    { value: 'León', label: 'León' },
    { value: 'Lérida/Lleida', label: 'Lérida/Lleida' },
    { value: 'La Rioja', label: 'La Rioja' },
    { value: 'Lugo', label: 'Lugo' },
    { value: 'Madrid', label: 'Madrid' },
    { value: ' Málaga', label: ' Málaga' },
    { value: 'Murcia', label: 'Murcia' },
    { value: 'Navarra', label: 'Navarra' },
    { value: 'Orense/Ourense', label: 'Orense/Ourense' },
    { value: 'Asturias', label: 'Asturias' },
    { value: 'Palencia', label: 'Palencia' },
    { value: 'Las Palmas', label: 'Las Palmas' },
    { value: 'Pontevedra', label: 'Pontevedra' },
    { value: 'Salamanca', label: 'Salamanca' },
    { value: 'S.C.Tenerife', label: 'S.C.Tenerife' },
    { value: 'Cantabria', label: 'Cantabria' },
    { value: 'Segovia', label: 'Segovia' },
    { value: ' Sevilla', label: ' Sevilla' },
    { value: 'Soria', label: 'Soria' },
    { value: 'Tarragona', label: 'Tarragona' },
    { value: 'Teruel', label: 'Teruel' },
    { value: 'Toledo', label: 'Toledo' },
    { value: 'Valencia', label: 'Valencia' },
    { value: 'Valladolid', label: 'Valladolid' },
    { value: 'Bizkaia/Vizcaya', label: 'Bizkaia/Vizcaya' },
    { value: 'Zamora', label: 'Zamora' },
    { value: 'Zaragoza', label: 'Zaragoza' },
    { value: 'Ceuta', label: 'Ceuta' },
    { value: 'Melilla', label: 'Melilla' },
  ]

  const [clinicList, setClinicList] = useState<Clinic[]>([]);
  const [clinicListFilteredSelect, setClinicListFilteredSelect] = useState<Clinic[]>([]);
  const [filterSelectClinic, setFilterSelectClinic] = useState<SingleValue<OptionType>>(null);
  // 新增状态：标记是否已选择省份
  const [isProvinceSelected, setIsProvinceSelected] = useState(false);

  const fetchClinicList = async () => {
    getClinic().then((response) => {
      console.log(response)
      setClinicList(response);
      // 移除初始填充筛选列表的逻辑
    }).catch((error) => {
      console.error(error);
      throw error;
    });
  }

  const handleChangeSelect = (provinceList: SingleValue<OptionType>) => {
    console.log(provinceList)
    setFilterSelectClinic(provinceList);
    filterSelect(provinceList);
    // 选择后标记为已选择，展示列表
    setIsProvinceSelected(true);
  }

  const filterSelect = (termSearch) => {
    let resultFilterSelect;
    // 处理选择"Todos"的情况，展示所有诊所
    if (termSearch.value === 'Todos') {
      resultFilterSelect = [...clinicList];
    } else {
      resultFilterSelect = clinicList.filter((element) => {
        return element.province?.toString().toLowerCase().includes(termSearch.value.toLowerCase());
      });
    }
    setClinicListFilteredSelect(resultFilterSelect);
  }

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

  return (
    <>
      <div>
        <h1>Encuentra tu clínica</h1>
      </div>
      <div>
        <Select
          defaultValue={filterSelectClinic}
          options={provincesList}
          onChange={handleChangeSelect}
          placeholder="Selecciona una provincia"
        />

        {/* 仅当已选择省份时才渲染诊所列表 */}
        {isProvinceSelected && clinicListFilteredSelect.length > 0 && (
          clinicListFilteredSelect.map((clinic) => (
            <div key={clinic.title}>
              <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>
          ))
        )}
        {/* 处理选择后无结果的情况 */}
        {isProvinceSelected && clinicListFilteredSelect.length === 0 && (
          <div>No se encontraron clínicas para la provincia seleccionada</div>
        )}
      </div>
    </>
  )
}

关键修改说明： #

1. 新增isProvinceSelected状态，初始为false，用户选择省份后设为true，控制诊所列表的显示
2. 将filterSelectClinic初始值设为null，并给Select组件添加占位提示文字，引导用户选择
3. 修改fetchClinicList，移除初始填充clinicListFilteredSelect的逻辑，避免初始显示全部诊所
4. 优化filterSelect函数，处理选择"Todos"时显示所有诊所的情况
5. 渲染时通过isProvinceSelected判断是否展示列表，并添加无结果提示

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