如何使用 React Hooks 指示请求正在加载，然后在请求完成后更改 UI？

大佬教程收集整理的这篇文章主要介绍了如何使用 React Hooks 指示请求正在加载，然后在请求完成后更改 UI？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

考虑这个使用 React 钩子的例子：

function async APIrequest(ID) {
  return fetch('http://someurl.com/API/' + ID)  
}

function ParentComponent() {
  [ID,setID] = useState(0);
  
  useEffect(() => {
    const newID = await APIrequest(ID);
    setID(newID.result.ID);
  },[ID])

  return (
     <>
       <p>ID is currently {ID}</p>
       <Childbutton ID={1} handLeonClick={setID} />
     </>
  )
}

function Childbutton({ID,handLeonClick}) {
  render (
    <button onClick={(E) => {handLeonClick(ID)} }>Click Me</button>
  )
}

现在假设我想做两件事：

• 按下按钮后显示请求正在进行中
• 使按钮在被点击后消失，并且对 API 的成功请求已完成。

假设我们不能依赖从 API 返回的特定值。

要做到这一点，我需要采取的最少步骤是什么？要么我遗漏了什么，要么使用 React 钩子很难做到这一点。

const [clicked,setclicked] = useState(false);

const handLeonClick = () => {
  setClicked(true)
}

<p>ID is currently {iD}</p>
if (!clicked && id === 0) {
   <ChildButton id={1} handLeonClick={handLeonClick} />
}

大佬总结

以上是大佬教程为你收集整理的如何使用 React Hooks 指示请求正在加载，然后在请求完成后更改 UI？全部内容，希望文章能够帮你解决如何使用 React Hooks 指示请求正在加载，然后在请求完成后更改 UI？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。