在React事件处理函数中调用自定义Hook useData报错，如何解决？

错误原因 #

React Hook必须遵循两条核心规则：

• 只能在React函数组件的顶层或自定义Hook的顶层调用
• 不能在条件判断、循环、事件处理函数等嵌套逻辑中调用

你在事件处理函数handleCityInput里调用useData这个自定义Hook，直接违反了上述规则，因此触发报错。

解决方案 #

方案一：改用普通异步函数发起API请求 #

把API请求逻辑提取为普通异步函数，在事件处理函数中直接调用：

// 提取城市数据请求逻辑
const fetchCities = async (countryId) => {
  try {
    // 替换为你的实际API地址和请求方式（比如axios）
    const response = await fetch(`/api/cities?country-id=${countryId}`);
    return await response.json();
  } catch (err) {
    console.error('获取城市数据失败:', err);
    return [];
  }
};

// 城市输入框变化事件处理
const handleCityInput = async (e) => {
  if (e.target.value.length < 3) return;
  
  const citiesData = await fetchCities(selectedCountryISO2);
  setCitiesData(citiesData);
};

方案二：调整自定义Hook的使用方式（保留useData） #

如果需要保留useData这个Hook，要在组件顶层调用它，通过状态变量触发请求：

import { useState, useEffect } from 'react';

// 组件顶层状态：控制是否触发城市数据请求
const [triggerCityFetch, setTriggerCityFetch] = useState(false);

// 组件顶层调用useData，依赖triggerCityFetch和选中的国家ID
const { data: citiesData } = useData(
  "cities", 
  { "country-id": selectedCountryISO2 },
  triggerCityFetch // 假设useData支持接收触发请求的依赖参数
);

// 监听citiesData变化，更新本地状态
useEffect(() => {
  if (citiesData) {
    setCitiesData(citiesData);
  }
}, [citiesData]);

// 事件处理函数
const handleCityInput = (e) => {
  if (e.target.value.length < 3) {
    setTriggerCityFetch(false);
    return;
  }
  // 触发请求
  setTriggerCityFetch(true);
};

注：此方案需要你的useData自定义Hook内部实现支持监听依赖变化（比如通过useEffect），当triggerCityFetch变为true时自动发起API请求。

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