react-router

Posted 专注前端开发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-router相关的知识,希望对你有一定的参考价值。

切换路由时,控制台警告

Can Only update a mounted or mounting component.this usually means you called setState() on an unmounted component.This is a no-op. Please check the code for the State component.

前端发了一个异步请求,在异步请求的回调中使用this.setState方法;当异步请求发送后接口数据还没返回期间,做了路由切换的操作,于是上一个react组件就被销毁了。但是这时,刚才向后台发送的异步请求却在这时返回了,于是执行this.setState方法,但是,这个组件的生命周期已经结束,被销毁了,于是就出现这样的警告。总之,是因为组件被销毁了,又执行了this.setState方法。

 

解决方案:

自己维护一个_isMounted,在componentDidMount回调中设置为true,在componentWillUnmount设置为false,就可以判断销毁状态了。

if (this._isMounted) {
    this.setState({});
}

官网说,这个警告为了帮助开发者捕捉bug,当你销毁组件后,又调用了this.setState方法,表明你的组件很有可能未正常清理,可能造成内存泄漏。

以上是关于react-router的主要内容,如果未能解决你的问题,请参考以下文章

React-Router学习

使用 webpack 和 react-router 进行延迟加载和代码拆分不加载

如何使此代码与 react-router v6 兼容

react-router 学习笔记

react-router 4实现代码分割(code spliting)

React-Router如何防止重定向