第一次加载网站时如何添加加载微调器

Question

我正在使用 React。 React 和 nodejs 中的新功能。

我的应用程序在加载组件之前需要花费几次时间，这些时间用于加载资源和验证用户。这次只展示不需要从服务器加载数据的那个组件。

我想设置一个加载微调器，直到资源加载完成。我想在删除数据或更新数据时做同样的事情。

这是我的数据加载组件。

const useBook = (path, value) => {
  const [products, setProducts] = useState([]);
  const [product, setProduct] = useState({});
  const [state, setState] = useState(false);
  useEffect(() => {
    const query = `${path}/${value} `;
    const url = `http://localhost:5000/book/${path ? query : ""}`;
    (async () => {
      await axios.get(url).then((res) => {
        // setProducts(res.data.result);
        if (path !== "id") {
          setProducts(res.data.result);
        } else {
          setProduct(res.data);
        }
      });
    })();
  }, [path, state, value]);

请求的响应是：

{
    "data": {
        "result": [
            {
                "_id": "626cf32c0c39af8566524692",
                "name": "Enjoy Your Life",
                "description": "Short Description",
                "price": 220,
                "quantity": 28,
                "supplier": "Maktabatul Azhar",
                "image": "https://images-na.ssl-images-amazon.com/images/I/61mkMeByEJL.jpg"
            },
            {
                "_id": "626cfcb26940e72778e26201",
                "name": "Dont't Be Sad",
                "description": "Short Description",
                "price": 300,
                "quantity": 90,
                "supplier": "Maktabatul Asraf",
                "image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
            },
            {
                "_id": "626cfcd56940e72778e26202",
                "name": "Dont't Be Sad",
                "description": "Short Description",
                "price": 250,
                "quantity": 100,
                "supplier": "Maktabatul Asraf",
                "image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
            },
            {
                "_id": "626cfcef6940e72778e26203",
                "name": "La Tahjan",
                "description": "Short Description",
                "price": 320,
                "quantity": 20,
                "supplier": "Maktabatul Asraf",
                "image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
            },
            {
                "_id": "626cfd396940e72778e26204",
                "name": "Hotash Hoben Na",
                "description": "Short Description",
                "price": 400,
                "quantity": 50,
                "supplier": "Hudhud",
                "image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
            },
            {
                "_id": "626cfde06940e72778e26205",
                "name": "Don't Be Angry",
                "description": "Short Description",
                "price": 160,
                "quantity": 0,
                "supplier": "Kalantor",
                "image": "https://www.kalantorprokashoni.com/wp-content/uploads/2017/06/Rag-Korben-Na-01.jpg"
            }
        ]
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-length": "1367",
        "content-type": "application/json; charset=utf-8"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {
            "FormData": null
        },
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:5000/book/limit/6 "
    },
    "request": {}
}

在服务器端，我使用的是 expressjs。数据从本地服务器加载。所有数据仅供测试。

Answer 1

首先，你创建一个加载组件，在那里放一个加载元素，你可以使用bootstrap加载组件

之后在您的产品组件中写入， if(products.length===0){ return <Loading></Loading> }

正在加载所有产品。

第一次加载网站时如何添加加载微调器

How to add loading Spinner when first time loaded the website

loading

spinner

reactjs