Javascript 如何指示正在加载请求，然后在请求完成后使用React钩子更改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请求（id）{
返回获取（'http://someurl.com/api/“+id）
}
函数ParentComponent（）{
[id，setId]=useState（0）；
useffect（（）=>{
const newId=等待API请求（id）；
setId（newId.result.id）；
}，[id]）
返回(
ID当前为{ID}

)
}
函数子按钮（{id，handleOnClick}）{
渲染(
{handleOnClick（id）}>单击我
)
}

现在假设我想做两件事：

• 在我按下按钮后显示请求正在进行
• 单击按钮并成功请求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} />
}

const[clicked，setclicked]=useState（false）；
const handleOnClick=（）=>{
setClicked（true）
}
ID当前为{ID}

如果（！单击&&id==0）{
}

您的标题似乎与问题正文不同。要求“最佳实践”很可能被认为是“基于意见的”，因为“最佳实践”是指那些将这些意见贴上“最佳实践”标签的人所表达的意见。如果你想问如何使按钮在点击后消失，并在请求完成后重新出现，问这个问题。你试过什么？有没有努力寻找答案？你找到了一个你不明白的解决方案吗？是什么使一个解决方案既具有“最佳实践”又具有“最小步骤”？

{id&&}

？@TJ我假设这取决于0是错误的，它是脆弱的，只在这种情况下有效。我在寻找一个通用的解决方案来解决这个问题，即指示一个请求已经开始，然后只在请求完成后才执行某些操作。@HereticMonkey我不是在寻找解决这个确切问题的方法，这是一个简化的示例。我假设有一个触发动作的UI是一个常见的用例，然后在动作完成后对UI触发的动作做出响应，所以我假设一定有一种使用React的常见方法。