使用React来创建加载界面的方法

有时候在进行API通信时，如果等待时间很长，有时候需要显示加载状态的呢~

在这种情况下，我们可以使用useState来管理加载状态！

首先

准备一个用于API通信的React组件！

这次我们要使用jsonplaceholder。
非常方便，一定要看看！→https://jsonplaceholder.typicode.com/

import React, { useState, useEffect } from "react";

const Api = () => {
  const [data, setData] = useState(undefined);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((json) => {
        setData(json)
      })
      .catch(() => {
        alert("error")
      });
  }, []);


  // ここを変更
  return (
    <>
      {data === undefined ? "" : <div>{data[0].title}</div>}
    </>
  );
};

export default Api;

使用此API可以显示数据的第一个标题名！

使用useState设置用于管理isLoading状态的状态！

const [isLoading, setIsLoading] = useState(false);

当isLoding为true时，表示正在加载中。

在进行API通信的部分，需要进行true和false的切换。

  useEffect(() => {
    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((json) => {
        setData(json)
        setIsLoading(false);
      })
      .catch(() => {
        alert("error")
        setIsLoading(false);
      });
  }, []);

使用三个运算符来设置加载时和非加载时的显示

{isLoading ? <p>ローディング中</p> : <p>終わりだピョーン</p>}

这样你就可以管理加载状态了！如果使用得当，还可以实现加载动画或者按组件显示！