这个问题是因为在某个页面,数据还未拿到,就进行路由切换,导致页面销毁。而当数据拿到之后再进行setState或者useState时,找不到组件引发的报错。
我用的是函数式组件,分享下解决方案(Function):
const [storeData, setstoreData] = useState([])
useEffect(() => {
let isFlag = false
getData().then( res => {
if (!isFlag) {
setstoreData(res)
}
})
return ()=> {
isFlag = true
}
}, [])
类组件解决方案(Class):
componentWillUnmount钩子函数在组件销毁的时候将异步方法撤销
componentWillUnmount() {
this.setState = ()=>false;
}
顺便分享一下React Hooks中useEffect的使用方法:
useEffect本身是一个函数,作用是指定一个副效应函数,组件每渲染一次,这个函数就自动执行一次。一般我们会在useEffect中改变某些状态或者请求接口获取数据。第一个参数就是我们完成目标的操作。第二个参数是一个数组,在我们不希望useEffect每次渲染都执行的时候可以用到,数组中的值是副效应函数的依赖项,当依赖项发生变化时,才会重新运行。他还有一个返回值,可以简单的写成一个箭头函数,在组件卸载的时候,执行这个函数,就可以清除副效应,第一个代码段中就用到了这个返回值。
(Ps: 附上阮大大关于useEffect讲解的文章:轻松学会 React 钩子:以 useEffect() 为例 - 阮一峰的网络日志)