Question

我有一个从api获取数据的应用。进行读取时，有一个加载状态，该状态在屏幕上显示一个图标。但是，这是快速闪烁。我想在屏幕上显示加载图标2秒钟，以改善用户界面并使用户知道正在发生的事情。

这是我的代码：

 const [info, setInfo] = useState({});
 const [loading, setLoading] = useState(false);

useEffect(() => {
    setLoading(true);
    axios
      .get(`https://restcountries.eu/rest/v2/alpha/${code}`)
      .then((response) => {
        console.log(response);
        setInfo(response.data);
        setLoading(false);
      });

  }, []);

 return (
    <div>
      <Link to='/'>
        <button>Back</button>
      </Link>
      {loading ? (
        <LoadingIcon />
      ) : (
        <CountryInfo
          info={info}
          borders={borders}
          languages={languages}
          currencies={currencies}
        />
      )}
    </div>
  );
};

Answer 1

您可以使用promise.all

因此，即使您的请求提前到来，您的加载也会显示至少2秒钟。

setLoading(true);
const fetchPromise = axios
  .get(`https://restcountries.eu/rest/v2/alpha/${code}`);
const timeOutPromise = new Promise(resolve => {
  setTimeout(resolve, 2000);
})

Promise.all([fetchPromise, timeOutPromise]).then(([response]) => {
  console.log(response);
  setInfo(response.data);
  setLoading(false);
})

Answer 2

一旦数据加载，api调用就会异步，我们将我们设置为false加载，因此您只能看到一秒钟。

或者，您也可以这样做。

{Object.entries(info).length === 0 && info.constructor === Object ? (
        <LoadingIcon />
      ) : (
        <CountryInfo
          info={info}
          borders={borders}
          languages={languages}
          currencies={currencies}
        />

Answer 3

只需在axios回调中添加setTimeout（（）=> setLoading（false），2000）。请注意，这将使加载时间增加2秒钟，因此请务必进行相应的调整。

Answer 4

  useEffect(() => {
    setLoading(true);

    const request = axios
      .get(`https://restcountries.eu/rest/v2/alpha/${code}`);

    const timer = new Promise(resolve => setTimeout(resolve, 2000));

    return Promise.all([request, timer]).then(([response]) => {
      console.log(response);
      setInfo(response.data);
      setLoading(false);
    });    
  }, []);

Answer 5

在成功回调中添加setTimeout。

useEffect(() => {
    setLoading(true);
    axios
      .get(`https://restcountries.eu/rest/v2/alpha/${code}`)
      .then((response) => {
        console.log(response);
        setTimeout(function(){
            setInfo(response.data);
            setLoading(false);
        },2000)
      });

  }, []);

如何使用钩子将setTimeout（）用于React中的加载状态？

5 个答案: