提交表单后useQuery调用后setState未执行问题排查

核心错误原因 #

你遇到的问题本质是违反了React钩子的调用规则：

• useQuery是React Query提供的React钩子，必须在组件的顶层作用域或自定义钩子的顶层调用，绝对不能在异步回调（比如表单的onSubmit函数）内部调用。这种违规会直接触发React的错误，导致useQuery之后的代码完全中断执行。
• 退一步说，表单提交属于数据修改操作，React Query中这类场景应该用useMutation而非useQuery，useQuery仅用于数据查询场景。

具体问题拆解 #

1. 钩子调用位置错误：onSubmit是嵌套在表单配置里的异步回调函数，不符合React钩子"只能在组件顶层调用"的规则，执行到useQuery时直接报错，后续代码自然无法运行。
2. API调用方式错误：即使忽略钩子规则，你现在的写法是直接执行AccessionApi.addNewContainerInstance(addNewContainerPayload)，而React Query要求第二个参数是返回Promise的函数（用于延迟触发请求），这种写法会立即执行请求，且无法被React Query正确管理。

修复方案（改用useMutation） #

步骤1：在组件顶层定义Mutation

// 组件顶层（不能放在onSubmit或其他嵌套函数里）
const addNewContainerMutation = useMutation(
  'add-new-container',
  (payload) => AccessionApi.addNewContainerInstance(payload)
);

步骤2：修改onSubmit逻辑

onSubmit: async (values, actions) => {
  console.log(values.labelCode);
  
  // 优化：用find替代filter，只找第一个匹配项，同时加可选链避免报错
  const serialLabel = values.labelCode !== '' 
    ? labelCodeList.find(item => item.id === values.labelCode)?.name 
    : '';
  const serialUse = useCodeList.find(item => item.id === values.useCode)?.name;

  // 提前处理找不到匹配项的情况
  if (!serialUse) {
    console.error('未找到匹配的useCode');
    return;
  }

  const serialNumber = generateSerialNumber({ serialLabel, serialUse, serialNumberList });
  const addNewContainerPayload = generatePayloadNewConatiner(values.containerType, values.labelCode, values.useCode, serialNumber);

  try {
    // 调用mutation的异步方法提交数据
    const addNewContainerInstance = await addNewContainerMutation.mutateAsync(addNewContainerPayload);
    
    // 后续逻辑正常执行
    setGeneratedSerialNumber(serialNumber);
    console.log(addNewContainerInstance);
    
    // 可选：提交成功后重置表单
    actions.resetForm();
  } catch (error) {
    // 处理提交失败的情况
    console.error('容器创建失败:', error);
  }
}

额外优化建议 #

• 用find替代filter：你只需要匹配第一个符合条件的项，find比filter更高效，且直接返回单个对象而非数组。
• 添加错误边界：通过try/catch捕获请求异常，避免页面崩溃。
• 可选链保护：使用?.避免因找不到匹配项导致的Cannot read property 'name' of undefined错误。

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