在React Native中提交Formik表单

ryoqjall  于 2023-02-05  发布在  React
关注(0)|答案(2)|浏览(148)

我正在构建一个使用Formik的React Native应用程序。当我提交表单时,我调用handleSubmit

<Formik
  onSubmit={values => {
    handleSubmit(values)
  }}>

我在表单上的return之前定义了这个:

const handleSubmit = (values) => {
  const { status, data } = usePostRequest("/api/holidays-request", {
    dateFrom: "2023-02-01",
    dateTo: "2023-02-28",
    fromHalf: 0,
    toHalf: 0,
  });
};

我在这里硬编码了一些值以供测试。
我的usePostRequest是我编写的一个自定义钩子,用于将数据实际发送到我的API。
当我提交表单时,handleSubmit被触发,但我得到一个错误:
警告:从submitForm()捕获到未处理的错误[错误:无效的挂接调用。只能在函数组件的主体内部调用挂接。以下原因之一可能会导致这种情况:
1.您可能有不匹配的React和呈现器版本(例如React DOM)
1.你可能违反了钩子的规则
1.同一应用程序中可能有多个React副本
我失败的原因一定是原因2,但是我不确定如何使用我的usePostRequest从表单提交值。

jei2mxaa

jei2mxaa1#

我建议您查看一下定制钩子的文档
在这种特殊情况下,您应该将post逻辑编写为函数,并在这里直接使用它。

oug3syen

oug3syen2#

不要在事件处理程序中调用挂钩。

const handleSubmit = (values) => {
  const { status, data } = usePostRequest("/api/holidays-request", {
    dateFrom: "2023-02-01",
    dateTo: "2023-02-28",
    fromHalf: 0,
    toHalf: 0,
  });
};

有关详细信息,请参见Invalid Hook Call Warning

相关问题