Estoy creando un formulario usando Formik. He creado mi formulario siguiendo el patrón aquí: https://formik.org/docs/examples/basic
Ahora quiero usar el resultado del gancho de reacción useParams ( https://reach.tech/router/api/useParams ) como entrada para la función onSubmit.
Esta es la parte onSubmit de los documentos de Formik:
onSubmit={async (values) => { await new Promise((r) => setTimeout(r, 500)); alert(JSON.stringify(values, null, 2)); }}Intenté agregar esta línea:
onSubmit={async (values) => { await new Promise((r) => setTimeout(r, 500)); const myValue = useParams()["myParam"] alert(JSON.stringify(values, null, 2)); }} donde useParams se importa de 'react-router-dom'
Pero esto me da un error: 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
Soy nuevo en React/Formik y no sé cómo proceder desde aquí. ¿Cómo puedo obtener el valor de myParam dentro de la función onSubmit?
Como se mencionó en el error, debe llamar a useParams() en el nivel de componente en lugar de en las devoluciones de llamada (o no componentes).
Puede consultar el ejemplo en este documento de nuevo
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 )De acuerdo con su código, la forma correcta debería ser
//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)); }}> }Los Hooks de React son funciones particulares que React usa para realizar la lógica de React, puede detectarlos en un proyecto de React ya que se nombran con el prefijo use : useNameOfHook
Los ganchos de React solo se pueden invocar dentro del cuerpo de un componente de React, por lo que no se pueden anidar dentro de otra función como está tratando de hacer. (Consulte las "Reglas de los ganchos" para obtener más información sobre los ganchos en React).
useParams es un enlace de React Router que devuelve sus parámetros de ruta, por lo que solo necesita llamarlo dentro de su componente React, así:
// App.js const App = () => { const params = useParams() console.log("PARAMS", params) return (<div>{params.yourParam}</div>) }