使用钩子在按钮onClick事件时响应ajax调用 import React，{useState，useffect}来自“React”； 从“axios”导入axios； 函数App（）{ const[contact，setContact]=useState({ fName:“”， 名称：“， 电子邮件：“ }); 函数handleClick（）{ const res=axios.get（“url”）； } useffect（（）=>{ handleClick（）； }) 返回( 你好{contact.fName}{contact.lName}

{contact.email}

提交 ); } 导出默认应用程序； 我用空字符串设置初始状态，但每当用户单击“提交”按钮时，我都试图用外部源的数据更新输入属性

---

我听说我需要使用useEffect方法来调用react中的api，但我不知道从哪里开始

如果要更新点击按钮上的数据，那么可以使用计数机制，一个单独的变量来跟踪计数

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;

const[count，setCount]=useState（0）；
setCount（count+1）}>提交
异步函数handleClick（）{
const res=等待axios.get（“url”）；
设置联系人（res.data）；
}
useffect（（）=>{
handleClick（）；
}，[联系方式，计数]；

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]);