Javascript 响应显示加载api调用持续时间的动画

现在我觉得我读的关于React的书越多，我就越不了解

我试图解决这个简单的问题：在为我的组件获取数据的过程中，显示一个加载微调器

这就是我认为它会起作用的方式：

使用状态监视加载

const[isLoading，setIsLoading]=useState（false）

在此状态下使用条件呈现

return（{isLoading&&I am loading}）

在api调用启动时设置加载，并在响应到达时重置

useEffect(() => {
 const fetchData = async () => {
   let result;
   setIsLoading(true);    
   result = await api.get(URL);    // this takes 2000ms!
   setData(result.data);
   setIsLoading(false);
 };

 fetchData();
},[api]);

但是，正如文档所述，

setState

是异步的，可以成批发送。网络呼叫需要2秒钟，但我从未看到加载动画。
那我该怎么做呢

---

编辑：这就是你可以做到的。我的错误在其他地方-

setIsLoading（false）

也在另一个

useffect

中，它将数据作为依赖项。我不得不用

if（data）

将整个逻辑包装在

useffect

中，因为在第一次渲染时，我的数据没有定义，但这仍然触发了初始的

useffect

，可能像我猜的旧组件didmount逻辑一样-加载动画停止得太快了。

我认为你在那里得到的东西是有效的。我在这里实现了它：

导入“/styles.css”； 从“React”导入React，{useState，useffect}； 导出默认函数App（）{ const[isLoading，setIsLoading]=useState（false）； useffect（（）=>{ const fetchData=async（）=>{ 让结果； 设置加载（真）； 结果=等待api.get（URL）；//这需要2000毫秒！ //setData（result.data）； 设置加载（假）； }; fetchData（）； }, []); 返回( {isLoading？当前正在加载

：null} 你好，代码沙盒 开始编辑，看看神奇的发生！ ); } 常量api={ get:async函数（）{ 等待新的承诺（（r，e）=>setTimeout（r，2000））； } };

---

我认为你在那里得到的有用。我在这里实现了它：您能给我们更多的代码吗，或者告诉我们为什么要将api作为依赖项？对于你的特殊情况，括号可以是空的。嗯，你是对的。谢谢我还有另一个与[数据]相关的useEffect，没有理由这么早就激活它。没想到会因为这个错误而发生错误。没问题：）看看useEffect文档，它模拟了一些您可能感兴趣的事件。：）我在回复@TKoL，[api]是为了可读性/保证api已经初始化

import "./styles.css";
import React, { useState, useEffect } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      let result;
      setIsLoading(true);
      result = await api.get(URL); // this takes 2000ms!
      //setData(result.data);
      setIsLoading(false);
    };

    fetchData();
  }, []);
  return (
    <div className="App">
      {isLoading ? <p>currently loading</p> : null}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const api = {
  get: async function () {
    await new Promise((r, e) => setTimeout(r, 2000));
  }
};