React.js在页面/ URL更改上加载动画

问题描述 投票:0回答:1

我是React的新手,我想在页面/ URL更改(单击按钮)上显示加载动画(https://codesandbox.io/s/cthululel-7zmsl?fontsize=14

我已经设法使动画在初始加载时可以正常工作,但是我现在遇到的问题是,当我单击按钮时,加载的动画会显示出来,但是它也会立即显示页面内容(每个页面仅一个h1标签进行测试),并且加载动画没有完成。我已经清理了沙箱,以显示我可以获得的唯一“工作”版本。

javascript reactjs frontend
1个回答
0
投票

您已经用每个路径编写了加载组件,它将与无限循环一起使用。要停止从那里删除那个正在加载的组件,并在每个组件中提供条件,>]

<Route path="/home">
        <Home />
      </Route>

Home.js

//Apply in each js file
import React from 'react'
import Loading from "../../components/loading/loading";

export default class Home extends React.Component
{
    constructor(props) {
        super(props);
        this.state = {
          loaded: false,
          done:false
        };
      }
    componentDidMount() {
        setTimeout(() => {
          fetch("https://jsonplaceholder.typicode.com/posts")
            .then(response => response.json())
            .then(json => {
              this.setState({ loaded: true });
              setTimeout(() => {
                this.setState({ done: true });
              }, 1200);
            });
        }, 1500);
      }
    render()
    {
        return(
            <div>Home {this.state.loaded ? "" : <Loading />}</div>
        )
    }
}

如果您不想调用API,只需在conponentDidMount()中更改状态即可

componentDidMount() {
        setTimeout(() => {
          this.setState({loaded:true})
        }, 1500);
      }
© www.soinside.com 2019 - 2024. All rights reserved.