Warning:
setState(...): 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 xxx component.
關於react中切換路由時報以上錯誤,實際的原因是因為在組件掛載(mounted)之后進行了異步操作,比如ajax請求或者設置了定時器等,而你在callback中進行了setState操作。當你切換路由時,組件已經被卸載(unmounted)了,此時異步操作中callback還在執行,因此setState沒有得到值。
解決的方式有兩種:
一、在卸載的時候對所有的操作進行清除(例如:abort你的ajax請求或者清除定時器)
componentDidMount = () => { //1.ajax請求 $.ajax('你的請求',{}) .then(res => { this.setState({ aa:true }) }) .catch(err => {}) //2.定時器 timer = setTimeout(() => { //dosomething },1000) } componentWillUnMount = () => { //1.ajax請求 $.ajax.abort() //2.定時器 clearTimeout(timer) }
二、設置一個flag,當unmount的時候重置這個flag
componentDidMount = () => { this._isMounted = true; $.ajax('你的請求',{}) .then(res => { if(this._isMounted){ this.setState({ aa:true }) } }) .catch(err => {}) } componentWillUnMount = () => { this._isMounted = false; }
三、最簡單的方式(萬金油)
componentDidMount = () => { $.ajax('你的請求',{}) .then(res => { this.setState({ data: datas, }); }) .catch(error => { }); } componentWillUnmount = () => { this.setState = (state,callback)=>{ return; }; }
以上幾種方法是借鑒大佬的,這里總結一下,做個筆記。