在 formik onSubmit 中使用 react hook 值

Question

我正在使用 Formik 创建一个表单。我按照这里的模式创建了我的表单： https://formik.org/docs/examples/basic

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

这是 Formik 文档中的 onSubmit 部分：

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'

导入的

但这给了我一个错误： React Hook "useParams" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function

我是 React/Formik 的新手，不知道如何从这里开始。如何在 onSubmit 函数中获取 myParam 的值？

Answer 1

React Hooks 是 React 用来执行 React 逻辑的特殊函数，您可以在 React 项目中发现它们，因为它们以 use 前缀命名： useNameOfHook
React hooks 只能在 React 组件的内部调用，因此它们不能像您尝试的那样嵌套在另一个函数中。（查看 "Rules of hooks" 了解更多关于 React 中的钩子的信息）。
useParams 是一个 React Router 钩子，returns 你路由参数，所以你只需要在你的 React 组件中调用它，就像这样：
```
 // App.js
 const App = () => {
 const params = useParams()
 console.log("PARAMS", params)
 return (<div>{params.yourParam}</div>)
}
```

Answer 2

正如提到的错误，您应该在组件级别而不是在回调（或 non-components）中调用 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));
  }}>
}

在 formik onSubmit 中使用 react hook 值

use react hook value in formik onSubmit

javascript

reactjs

formik