在自定义函数中调用Antd Form.useWatch()触发Hooks调用位置错误

Form.useWatch 是遵循React Hook规则的API，它必须在函数组件的顶层或者自定义Hook的顶层调用，不能嵌套在普通函数（比如你的getFieldValue、checkAccountNumber）内部，否则就会触发「Hooks can only be called inside of the body of a function component」错误。

根据你的使用场景，有几种可行的修复方式：

方式1：在组件顶层直接监听字段 #

如果需要实时监听account_number字段的变化，直接在组件顶层调用Form.useWatch，之后在checkAccountNumber里直接使用这个值：

// 函数组件的顶层调用Hook
const accountNumber = Form.useWatch("account_number", form);

const checkAccountNumber = () => {
  if(isNumeric(accountNumber))
    console.log("this true")
  else
    console.log("this is false");
}

方式2：封装成合法的自定义Hook #

如果需要复用监听不同字段的逻辑，把getFieldValue改成符合规范的自定义Hook（必须以use开头），然后在组件顶层调用：

// 自定义Hook，名称以use开头
const useGetFieldValue = (fieldName, form) => {
  return Form.useWatch(fieldName, form);
}

// 组件顶层调用自定义Hook
const accountNumber = useGetFieldValue("account_number", form);

const checkAccountNumber = () => {
  if(isNumeric(accountNumber))
    console.log("this true")
  else
    console.log("this is false");
}

方式3：直接使用form实例的getFieldValue方法 #

如果只是在触发checkAccountNumber（比如按钮点击）时获取一次字段值，不需要实时监听，直接用Ant Design Form实例自带的getFieldValue方法更高效，完全不需要用useWatch：

const checkAccountNumber = () => {
  // 直接通过form实例获取字段值
  const accountNumber = form.getFieldValue("account_number");
  if(isNumeric(accountNumber))
    console.log("this true")
  else
    console.log("this is false");
}

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