如何在reactjs中添加加载效果？

Question

我正在使用 mern stack 创建一个网站。在 React 文件中，我使用了很多钩子，在 useState 钩子中，更改和设置新状态需要一些时间。所以，那时候它显示的是状态改变之前的数据。我想在 useState 更改状态并显示数据之前提供一些加载效果。创建这种效果的简短方法是什么？

Answer 1

你可以使用这样的东西

import React, { useEffect } from "react";

import { getDatas } from "./getDatas";
import Datas from "../components/Datas";
import Loading from "../components/Loading";

export default function Component() {
  const [datas, setDatas] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getDatas().then((res) => {
     setDatas(res.datas);
     setLoading(false);
    });
  }, []);

  return (
    <div>
      {loading ? <Loading /> : <Datas />
    </div>
  );
}

如何在reactjs中添加加载效果？

How to add loading effect in reactjs?

css

loading

reactjs

react-hooks