Я создаю форму с помощью Formik. Я создал свою форму по образцу здесь: https://formik.org/docs/examples/basic
Теперь я хочу использовать результат хука реакции useParams (https://reach.tech/router/api/useParams) в качестве входных данных для функции onSubmit.
Это часть 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'
Но это дает мне ошибку:
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 и не знаю, как действовать дальше. Как я могу получить значение myParam
внутри функции onSubmit?
Я обновил свой вопрос, включив в него полный фрагмент кода.
React Hooks — это определенные функции, которые React использует для выполнения логики React, вы можете обнаружить их в проекте React, поскольку они названы с префиксом использовать: useNameOfHook
Хуки React можно вызывать только внутри тела компонента React, поэтому они не могут быть вложены в другую функцию, как вы пытаетесь это сделать. (Проверьте «Правила крючков», чтобы узнать больше о хуках в React").
useParams
— это хук React Router, который возвращает вам параметры маршрута, поэтому вам просто нужно вызвать его внутри вашего компонента React, например:
// App.js
const App = () => {
const params = useParams()
console.info("PARAMS", params)
return (<div>{params.yourParam}</div>)
}
Как упоминалось в ошибке, вы должны вызывать 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));
}}>
}
Спасибо, это сработало. Меня смутило то, как устроена форма в formik.org/docs/examples/basic. Я отрегулировал его, чтобы он соответствовал вашей структуре.
Куда звонить
const myValue = useParams()["myParam"]
? Пожалуйста, покажите полный фрагмент кода для этой части. Это поможет сузить круг вашей проблемы