Как правильно сделать запрос в useEffect?

Question

[Artem641]

Всем привет.
Есть компонент регистрации пользователей.
Инпуты связаны с состоянием useState.
При клике отправляем данные в на сервер.
Обычно запросы делаются в useEffect, но в этом случаи я не пойму как связать функцию обработки на клик по кнопке и useEffect. Как это можно сделать?
Код и в таком виде работает, но насколько я знаю, при использовании функциональных компонентов, запросы необходимо помещать в useEffect().

import { useState } from 'react'
import s from './Registration.module.css'
import axios from 'axios'

export const Registration = () => {
  const [email, setEmail] = useState('')
  const [name, setName] = useState('')

  const onRegistration = (e) => {
    e.preventDefault()
    console.log(email, name)

    const formData = new FormData()
    formData.append('email', email)
    formData.append('name', name)

    axios
      .post('http://localhost:5000/users', {
        name: name,
        email: email,
      })
      .then((res) => {
        console.log(res)
      })
  }

  return (
    <div className={s.registration}>
      <p>Registration</p>
      <form>
        <div>
          <label htmlFor="email">Email: </label>
          <input
            value={email}
            onChange={(e) => {
              setEmail(e.target.value)
            }}
            type="text"
            id="email"
            name="email"
          />
        </div>

        <div>
          <label htmlFor="name">Name: </label>
          <input
            value={name}
            onChange={(e) => {
              setName(e.target.value)
            }}
            type="text"
            id="name"
            name="name"
          />
        </div>
        <button onClick={onRegistration}>Sign up</button>
      </form>
    </div>
  )
}

Comments

[WbICHA]

насколько я знаю, при использовании функциональных компонентов, запросы необходимо помещать в useEffect().

Кто вам такую глупость сказал?

Answer 1

[Andrey Vasilev]

Ничего не надо связывать, код написан правильно
Через useEffect ты можешь получить данные с сервера при рендере компонента

Answer 2

[Петр]

"Обычно запросы делаются в useEffect" это чтобы они не мешали отрисовке компонентов.
Но вы хотите запрос по событию "клик по кнопке", вот в нем и вызывайте.
Если вам нужно делать запросы на множество событий, под новое состояние компонента,
то можно добавить переменную

const [requestIteration, setRequestIteration] = useState(1);
useEffect(() => { <request> }, [requestIteration]);

const onClick = () => { setRequestIteration(requestIteration + 1) }

так у вас запрос будет после каждой смены состояния