乐趣区

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);

退出移动版