Can only update a mounted or mounting component.

在实现以下代码的时候,在屏幕大小改变的时候回跑出warning,但是效果
直接上代码

var React = require('react');
import DetectUtil from 'pofod/detectUtil';
function withSubscription(WrappedComponent,MobileComponent) {
    class Subscription extends React.Component{
        constructor(props){
            super(props);
            this.state={
                ExternalComponent:innerWidth>1023?WrappedComponent:MobileComponent
            }
            this.getPageLangParams=this.getPageLangParams.bind(this);
            this.MonitorSize = this.MonitorSize.bind(this);
        }
        getPageLangParams () {
            var query=this.props.location?(this.props.location.query?this.props.location.query:{}):{};
            var lang=this.props.lang||query.lang||DetectUtil.languageFamily()||'zh';
            return lang;
        }
        MonitorSize(){
            this.setState({
                ExternalComponent:innerWidth<1023?MobileComponent:WrappedComponent
            })
        }
        render(){
            let lang = this.getPageLangParams();
            let ExternalComponent = this.state.ExternalComponent;
            return (
                <ExternalComponent lang={lang}/>
            )
        }
        componentDidMount(){
            window.addEventListener('resize',this.MonitorSize)
        }
        componentWillUnmount(){
            window.removeEventListener('resize',this.MonitorSize)
        }
    }
    return Subscription;
}

module.exports = withSubscription;


其中函数的两个参数WrappedComponent和MobileComponent分别是两个组件

class Index extends React.Component{
          .......
}
class Mobile extends React.Component{
          .......
}

目的是实现通过resize监听屏幕尺寸变化,在小于1023的时候展现的是Mobile这个组件的内容。反之展现Index的内容。但是一直会有warning

求解#。#
阅读 1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题