React Hook每次按键均触发，需仅在Select的onChange时执行

常见问题根源 #

• 自定义Hook的副作用依赖数组配置错误，依赖了整个formik.values或formik对象，导致任意字段变更都会触发Hook逻辑
• Hook内部使用了每次渲染都会重新创建的回调/对象，导致依赖数组频繁变化，触发副作用
• Hook被嵌套在条件渲染、循环等会频繁重新执行的代码块中，而非组件顶层

具体排查与解决步骤 #

1. 修正副作用的依赖数组 #

这是最常见的问题，确保副作用只依赖目标下拉框的字段值，而非整个表单状态或Formik对象。

比如错误写法：

// displayProvinces.js 错误示例
export const useDisplayProvinces = (formik) => {
  useEffect(() => {
    // 加载省份逻辑
    fetchProvinces(formik.values.country);
  }, [formik.values]); // 依赖整个values，任意字段变都会触发
};

改成正确写法：

// displayProvinces.js 正确示例
export const useDisplayProvinces = (selectedCountry) => {
  useEffect(() => {
    if (!selectedCountry) return; // 空值时跳过
    fetchProvinces(selectedCountry);
  }, [selectedCountry]); // 仅依赖目标下拉框的选中值
};

组件调用时传入具体字段值：

// 表单组件内调用
const formik = useFormik({ /* 配置 */ });
// 只传入country字段的值，只有这个值变才触发Hook
useDisplayProvinces(formik.values.country);

2. 稳定Hook内部的回调/依赖 #

如果Hook需要调用Formik的方法（如setFieldValue），避免直接把临时回调放进依赖数组，要用useCallback包裹稳定化：

// 表单组件内
const setProvinceOptions = useCallback(
  (provinces) => formik.setFieldValue('provinceOptions', provinces),
  [formik.setFieldValue] // Formik的方法是稳定的，可安全作为依赖
);

// 传入稳定后的回调
useDisplayProvinces(formik.values.country, setProvinceOptions);

对应的Hook代码：

export const useDisplayProvinces = (selectedCountry, setProvinceOptions) => {
  useEffect(() => {
    const loadProvinces = async () => {
      const data = await fetch(`/api/provinces?country=${selectedCountry}`);
      setProvinceOptions(data);
    };
    if (selectedCountry) loadProvinces();
  }, [selectedCountry, setProvinceOptions]); // 依赖稳定后的回调
};

3. 确保Hook在组件顶层调用 #

自定义Hook必须遵循React的Hook规则，放在组件的顶层作用域，不能嵌套在if、循环或其他组件内部，否则会导致每次渲染都重新执行Hook逻辑：

// 正确：顶层调用
const MyForm = () => {
  const formik = useFormik({ /* ... */ });
  useDisplayProvinces(formik.values.country); // 顶层位置

  return (
    <form>
      {/* 表单字段 */}
    </form>
  );
};

// 错误：嵌套在条件里
const MyForm = () => {
  const formik = useFormik({ /* ... */ });

  if (formik.values.someField) {
    useDisplayProvinces(formik.values.country); // 禁止这样写
  }

  return <form>{/* ... */}</form>;
};

额外检查点 #

• 如果Hook内部有自己的状态（如useState），确认状态更新不会触发不必要的副作用，除非确实需要联动
• 测试时可以在Hook的副作用里加console.log，打印触发时的依赖值，确认是不是目标字段的变化导致的

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