React搜索表单需两次提交才能生效的问题求助

问题概况 #

开发账单搜索表单（支持按描述、ID、价格搜索）时遇到异常：

• 首次搜索可正常返回匹配结果
• 后续搜索需提交两次才能得到正确结果；第二次提交时，页面先显示全部账单，短暂闪显正确搜索结果后又恢复为全部数据

技术栈：React + TypeScript + Material UI

核心代码片段：

const { bills, getBillsByIdDescriptionPrice } = useContext(DataContext)
const { formState, inputChange, search } = useFormSearch({ search: '' })

const handleSubmit =  (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault()
  if (formState.search === '') return
  getBillsByIdDescriptionPrice(formState.search)
}

const submitButton = () => {
  if (formState.search === '') return
  getBillsByIdDescriptionPrice(formState.search)
}

{/* 数据展示部分 */}
{(bills.length === 0) ? <Typography variant='h5' 
sx={{ textAlign: 'center', color: 'black', fontWeight: 600, mt: 35 }}>
  No bills found...
</Typography> :
  <BillingTable bills={bills} />
}

可能的原因分析 #

1. 状态竞态/被覆盖：getBillsByIdDescriptionPrice异步请求完成前，有其他操作（比如自动刷新全部账单的useEffect、定时器）修改了bills状态，导致搜索结果被覆盖
2. 自定义Hook状态同步延迟：useFormSearch中的formState.search更新不及时，第一次提交时使用了旧的搜索值，导致请求无效
3. Context状态管理逻辑缺陷：getBillsByIdDescriptionPrice的实现存在问题，比如未正确处理异步请求的结果，或者状态更新逻辑有误

排查与修复步骤 #

1. 检查Context中的状态更新逻辑 #

查看DataContext里getBillsByIdDescriptionPrice的实现：

• 确认异步请求完成后，是否正确调用setBills更新状态
• 添加请求取消逻辑，避免旧请求覆盖新请求的结果（比如用AbortController）
• 检查是否存在其他修改bills的逻辑（比如获取全部账单的函数），是否在搜索后被意外触发

示例修复（添加请求取消）：

// 在DataContext中定义请求引用
const currentRequestRef = useRef<AbortController | null>(null);

const getBillsByIdDescriptionPrice = async (query: string) => {
  // 取消之前未完成的请求
  if (currentRequestRef.current) {
    currentRequestRef.current.abort();
  }
  const controller = new AbortController();
  currentRequestRef.current = controller;

  try {
    const res = await fetch(`/api/bills/search?query=${query}`, { signal: controller.signal });
    const data = await res.json();
    setBills(data);
  } catch (err) {
    if (!(err instanceof DOMException && err.name === 'AbortError')) {
      console.error('搜索失败:', err);
    }
  } finally {
    currentRequestRef.current = null;
  }
};

2. 验证自定义Hook的状态同步 #

• 在handleSubmit中添加日志，打印每次提交的formState.search值，确认是否为最新输入内容
• 检查useFormSearch的inputChange方法，确保它能立即更新formState.search，没有延迟或异步更新的情况

3. 排查自动刷新逻辑 #

检查组件或Context中是否存在useEffect等逻辑，在某些状态变化时自动获取全部账单。比如：

// 错误示例：若此useEffect在搜索后触发，会覆盖搜索结果
useEffect(() => {
  getAllBills();
}, [someTriggerState]);

可以修改为仅在搜索框为空时才获取全部账单：

useEffect(() => {
  if (formState.search === '') {
    getAllBills();
  }
}, [formState.search]);

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