Javascript 加载程序图标持续显示在my App.JS中

我试图添加一个加载器图标到我的网站，但它不断显示我应该把它放在一个组件，并导入它？当页面刷新时加载时，状态被设置为true，这可能与此有关

这是我的app.js文件

import React from "react";

import { createBrowserHistory } from "history";
import { Router, Route, Switch } from "react-router-dom";

import "assets/scss/material-kit-react.scss?v=1.4.0";

// pages for this product
import LandingPage from "views/LandingPage/LandingPage.jsx";
import ProfilePage from "views/ProfilePage/ProfilePage.jsx";
import { css } from "@emotion/core";
// First way to import
import { ClipLoader } from "react-spinners";

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;
var hist = createBrowserHistory();

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }
  render() {
    return (
      <>
        <ClipLoader
          css={override}
          sizeUnit={"px"}
          size={150}
          color={"#123abc"}
          loading={this.state.loading}
        />
        <Router history={hist}>
          <Switch>
            <Route path="/profile-page" component={ProfilePage} />
            <Route path="/" component={LandingPage} />
          </Switch>
        </Router>
      </>
    );
  }
}

从“React”导入React；
从“历史”导入{createBrowserHistory}；
从“react Router dom”导入{Router，Route，Switch}；
导入“资产/scss/材料套件react.scss？v=1.4.0”；
//此产品的页面
从“views/LandingPage/LandingPage.jsx”导入LandingPage；
从“views/ProfilePage/ProfilePage.jsx”导入ProfilePage；
从“@emotion/core”导入{css}；
//第一种进口方式
从“react微调器”导入{ClipLoader}；
const override=css`
显示：块；
保证金：0自动；
边框颜色：红色；
`;
var hist=createBrowserHistory（）；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：正确
};
}
render（）{
返回(
);
}
}

您的默认状态设置为true。因此，一旦组件渲染，它将显示加载

   this.state = {
      loading: false
    };

您可以将加载程序更改为HOC

import React from 'react';
import { ClipLoader } from "react-spinners";

function Loading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return (<Component {...props} />);
    return (<ClipLoader
          css={override}
          sizeUnit={"px"}
          size={150}
          color={"#123abc"}
          loading={isLoading}
        />);
  }
}
export default Loading;

---

加载的默认值为
true
。那么，经常看到加载器不是很正常吗？在第一次渲染时，它应该是
false
。当您执行某项操作并希望显示加载程序时，您应该将状态设置为
true
，当作业完成时，您应该再次将其还原为
false
。我认为您不需要在此处使用加载程序。在发出网络请求时使用它。比如这里或者这里，我的加载程序呈现为false，为什么我看不到它？？@绿色灯泡我不太明白你想说什么。但这是因为它是通过
加载
道具控制的。这就是为什么你看不见它
render() {
    return (
      <Loading isLoading={this.props.isLoading} data={data} />
    )
  }