react中使用antd的Toast组件,路由跳转时报错

一、原始代码如下:
Toast.success(‘绑定成功’,2,()=>{
if(this.state.fromFaultReport === false) this.props.history.goBack();
else {
console.log(‘跳转到其他页面’);
let url = ‘/someurl’;
that.props.history.push(url)
}
});
Toast组件是antd-mobile的Toast,提交成功后,先给出提示,然后跳转到其他页面。
二、此时,跳转可以成功,但是会报以下错误:

Uncaught DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
三、原因猜测
Toas组件是整个页面组件的子组件,因为路由跳转,页面已经卸载,但是Toast组件的onClose方法导致子组件还没有卸载。可能是Toast组件存在bug(解决该问题时在StackOverflow发现,使用fontAwsome的icon组件也会导致出现一样的问题)
四、解决方法
不使用onClose方法,而是使用定时器。
Toast.success(‘绑定成功’,0);
setTimeout(()=>{
Toast.hide();
if(this.state.fromFaultReport === false) this.props.history.goBack();
else {
console.log(‘跳转到其他页面’);
let url = ‘/someurl’;
that.props.history.push(url)
}
},2000);

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理