Реагировать на вызов ajax при событии кнопки onClick, используя перехватчики

Question

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
  });
  function handleClick() {
    const res = axios.get("url");
  }
  useEffect(()=>{
    handleClick();
  })

  return (
    <div className="container">
      <h1>
        Hello {contact.fName} {contact.lName}
      </h1>
      <p>{contact.email}</p>

      <input name="fName" placeholder={contact.fName} />
      <input name="lName" placeholder={contact.lName} />
      <input name="email" placeholder={contact.email} />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}

export default App;

Я устанавливаю начальное состояние с пустой строкой, но я пытаюсь обновить входные атрибуты данными из внешнего источника всякий раз, когда пользователь нажимает кнопку отправки.

Я слышал, что мне нужно использовать метод useEffect для вызова API в реагировать, но я понятия не имею, с чего начать.

Answer 1

если вы собираетесь обновить данные по нажатию кнопки, то вы можете использовать механизм подсчета, отдельную переменную для отслеживания счета.

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1 )}>Submit</button>


 async function handleClick() {
    const res = await axios.get("url");
    setContact(res.data);
  }

useEffect(() => {
  handleClick();
}, [contact, count]);