Javascript 在formik onSubmit中使用react hook值

发布于04月06日

我正在使用Formik创建一个表单.我按照以下模式创建了我的表单:

现在我想使用useParams react钩子(https://reach.tech/router/api/useParams)的结果作为onSubmit函数的输入.

这是Formik文档的提交部分:

onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}

我试着加上这句话:

onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    const myValue = useParams()["myParam"]
    alert(JSON.stringify(values, null, 2));
  }}

其中useParams是从"react router dom"导入的

但这给了我一个错误:

我是新手，不知道如何从这里开始.如何在onSubmit函数中获得myParam的值？

推荐答案

正如错误所提到的，您应该在组件级别调用useParams()，而不是在回调(或非组件)中调用useParams().

你可以再次判断this document中的示例

import { useParams } from "@reach/router"

// route: /user/:userName
const User = () => {
  const params = useParams(); //on the top of `User` component

  return <h1>{params.userName}</h1> //SHOULD NOT CALL `useParams` IN ANY CALLBACKS HERE
)

根据你的代码，正确的方法应该是

//I assume that `onSubmit` is in `Form` component
const Form = () => {
  const { myParam } = useParams() //you should call your `useParams` on the component level

  return <button onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    const myValue = myParam //replace for `useParams` 
    alert(JSON.stringify(values, null, 2));
  }}>
}