为什么我必须在搜索表单中进行“双重提交”？

Question

我目前正在开发一种表单，允许用户通过描述、ID 或价格搜索账单。然而，我遇到了一个问题：在初次搜索后，我必须提交两次表格才能得到想要的结果。

getBillsByIdDescriptionPrice(formState.search)

是一个函数，它从数据库中获取与输入内容匹配的所有

bills

formState.search

第一次搜索通常效果很好。但是，在第二次搜索时，提交查询后，它最初返回所有数据，而不是我正在查找的特定结果。再次提交表单后才最终显示出正确的数据。

在执行控制台日志时，我注意到在第二次搜索期间，它短暂地返回了正确的结果。然而，不久之后，它恢复显示所有数据，需要额外提交。

我希望有人能帮助我。非常感谢！

使用 Typescript 和 Material UI 做出反应

存储库链接：https://github.com/guidomora/facturacion-front/blob/main/src/billing/components/BillingSearch.tsx

在这里您可以查看代码：

 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)
  }


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

Answer 1

我觉得您需要将提交按钮更改为提交表单的真正提交按钮

<button type="submit">

。那么你只需要提交处理程序。

我还认为您的

useFormSearch

组件有可能处于陈旧状态。而不是将状态传播到状态设置器中

 setFormState({
      ...formState,
      [name]: numericValue,
    });

你应该像这样使用设置状态的功能方法。

 setFormState((prev)=> {
      ...prev,
      [name]: numericValue,
    });

这将保证你永远不会获取陈旧的状态。