react中添加重新加载功能

作者: MJ 分类: react 发布时间: 2019-05-29 17:23

我们在平时的开发中经常会遇到容错的情况,比如网络出问题了或者接口请求失败,我们会显示一个错误提示的组件,如下图:

我们需要重新加载一下当前路由,毫不犹豫的开始直接用 window.location.reload(),在浏览器中没问题,打包后直接访问,点击重新加载后傻眼了,岿然不动……

经过多方打探,找到了解决办法(心都碎了),就是重新,显式的加载一下componentDidMount

reload = () => 
{
    //RELOAD COMPONENT
    this.componentDidMount();
};

参考:https://stackoverflow.com/questions/47493723/reload-component-react

2019-05-30更新:

以上办法可以解决刷新的问题,但是也有他的局限性,他只是重新加载了一下componentDidMount生命周期的内容,但是其实我想让他从 constructor 阶段开始重新加载(在这个阶段我初始化了数据),这就没办法了。

经过搜索找到了解决思路:那就是让他跳转到一个空白的路由,然后在跳转回来,达到重新加载路由的效果,如果大家还有其他办法可以留言,大家一起进步。

blank.js

import React,{ Component } from 'react';
class Blank extends Component{
    componentWillMount(){
        window.history.go(-1);
    }
    render(){
        return null;
    }
}
export default Blank;

参考:https://blog.csdn.net/tracy_frog/article/details/80518983

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注