我是React的新手,我想在页面/ URL更改(单击按钮)上显示加载动画(https://codesandbox.io/s/cthululel-7zmsl?fontsize=14
我已经设法使动画在初始加载时可以正常工作,但是我现在遇到的问题是,当我单击按钮时,加载的动画会显示出来,但是它也会立即显示页面内容(每个页面仅一个h1标签进行测试),并且加载动画没有完成。我已经清理了沙箱,以显示我可以获得的唯一“工作”版本。
您已经用每个路径编写了加载组件,它将与无限循环一起使用。要停止从那里删除那个正在加载的组件,并在每个组件中提供条件,>]
<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);
}