"利用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------useStateuseEffect

详细分析

  1. useState的初始化

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

  1. useEffect的作用

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

  1. getCityAndArea 函数

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

结论

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

相关推荐
月忆3642 分钟前
等待组(waitgroup)
前端·爬虫·python
令狐寻欢5 分钟前
HTML中 的 meta 标签常用属性及其作用
前端·html
SynthWriter10 分钟前
Trae 帮我生成了一个贪吃蛇的游戏,好玩儿
前端
用户214118326360223 分钟前
dify案例分享-Dify+RSS 聚合 8 大平台实时热点,新闻获取效率飙升 300%
前端
百锦再25 分钟前
Razor编程中@Html的方法使用大全
前端·html
啪叽28 分钟前
JavaScript可选链操作符(?.)的实用指南
前端·javascript
Ian在掘金29 分钟前
bat+python实现easy connect自动连接
前端·python
代码搬运媛31 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
小桥风满袖33 分钟前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif36 分钟前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化