使用formik onsubmit中的react钩子值

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”无法在回调内调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

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

Answer 1

如前所述，您应该在组件级别而不是在回调（或非组件）中调用useParams（）。

中检查示例。

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

Answer 2

• React Hooks 是 React 用于执行 React 逻辑的特殊函数，您可以在 React 项目中找到它们，因为它们以 use 前缀命名：
  useNameOfHook

• React 钩子只能在 React 组件的主体内部调用，因此它们不能像您尝试的那样嵌套在另一个函数中。
  （查看“钩子规则”以了解有关 React 中钩子的更多信息”） .

• useParams 是一个 React Router 钩子，它返回路由参数，因此你只需在 React 组件中调用它，如下所示：

   // App.js
   const App = () =>; {
   const params = useParams()
   console.log("参数", 参数)
   return (
  {params.yourParam}
  )
  }