Использовать значение хука реакции в formik onSubmit

Я создаю форму с помощью 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?

Куда звонить const myValue = useParams()["myParam"]? Пожалуйста, покажите полный фрагмент кода для этой части. Это поможет сузить круг вашей проблемы

Nick Vu 05.04.2022 18:24

Я обновил свой вопрос, включив в него полный фрагмент кода.

Dan 05.04.2022 20:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
32
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

  • 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. Я отрегулировал его, чтобы он соответствовал вашей структуре.

Dan 05.04.2022 20:39

Другие вопросы по теме