"利用React自定义Hook管理地名数据：一次简洁实践"

使用自定义Hook获取地名数据

在日常的前端开发中，很多时候我们需要处理类似的逻辑或者数据结构。这时，React的自定义Hook为我们提供了一种优雅的解决方案。今天，我们将探讨如何使用自定义Hook来获取和管理地名数据。

基本概念

首先，为了更好地理解，我们需要有一个基本概念。在我们的案例中，我们希望获取中国的省、市、区数据。我们将根据所提供的PlaceType来获取相应的地名。

实现

tsx 复制代码

/**
 * 自定义Hook，基于所提供的PlaceType获取地名。
 *
 * @param {string} PlaceType - 查询的地点类型。默认为空字符串。
 * @returns {object} 包含省份数据、城市数据、区域数据以及获取城市和区域数据的函数的对象。
 */
function useGetPlaceName(PlaceType: 'td' | '' = ''): {
  provinceData: PlaceNameProps[];
  cityData: PlaceNameProps[];
  areaData: PlaceNameProps[];
  getCityAndArea: (key: string, type: 'city' | 'area') => void;
} {
  // 省、市、区的数据状态
  const [provinceData, setProvinceData] = useState<PlaceNameProps[]>([]);
  const [cityData, setCityData] = useState<PlaceNameProps[]>([]);
  const [areaData, setAreaData] = useState<PlaceNameProps[]>([]);
  const [CnData, setCnData] = useState<Record<string, unknown>[]>([]);

  /**
   * 根据PlaceType获取和处理城市数据。
   */
  useEffect(() => {
    queryCity(PlaceType).then((res) => {
      if (res) {
        const CnList = PlaceType === 'td' ? res['10045'] : res['86'];
        const tmpData = Object.entries(CnList).map(([key, value]) => ({ key, value }));
        setProvinceData(tmpData);
        setCnData(res);
      }
    });
  }, [PlaceType]);

  /**
   * 根据提供的key和type获取和处理城市或区域数据。
   *
   * @param {string} provinceKey - 省份的键。
   * @param {'city' | 'area'} type - 要获取的数据类型，城市或区域。
   */
  const getCityAndArea = (provinceKey: string, type: 'city' | 'area') => {
    const dataSubset = CnData[String(provinceKey)];
    const tmpData = Object.entries(dataSubset).map(([key, value]) => ({ key, value }));
    
    if (type === 'city') setCityData(tmpData);
    else if (type === 'area') setAreaData(tmpData);
  };

  return { provinceData, cityData, areaData, getCityAndArea };
}

export { useGetPlaceName };

我们首先导入了必要的hooks------useState和useEffect。

详细分析

useState的初始化

我们定义了四个状态：provinceData, cityData, areaData 和 CnData，用于存储省、市、区的数据和整体数据。

useEffect的作用

useEffect保证了当PlaceType发生变化时，我们的数据会重新查询。在内部，我们通过调用queryCity函数获取数据，并对数据进行处理，最后更新到我们的状态中。

getCityAndArea 函数

这个函数的目的是获取特定省份的城市或区域数据。根据提供的provinceKey和类型（城市或区域），它处理并更新相应的状态。

结论

通过使用自定义Hook，我们可以更加模块化地管理和处理地名数据，从而使代码更加清晰和可维护。这只是自定义Hook的一个小示例，但希望这能帮助你看到其强大的功能和在日常开发中的潜在应用。