Question

我最近将我的项目升级为使用React 16.4.1而不是15.2.1。我有以下组件因给我TypeError而中断：_react2.default.PropTypes是未定义的错误。

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default function (ComposedComponent) {
  class Authentication extends Component {
    static contextTypes = {
      router: React.PropTypes.object,
    }

    componentWillMount() {
      if (!this.props.authenticated) {
        this.context.router.push('/login');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.context.router.push('/login');
      }
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return connect(mapStateToProps)(Authentication);
}

我将代码更改为以下内容：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

export default function (ComposedComponent) {
  class Authentication extends Component {
    componentWillMount() {
      if (!this.props.authenticated) {
        this.context.router.push('/login');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        this.context.router.push('/login');
      }
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }
  }

  Authentication.propTypes = {
    router: PropTypes.object
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return connect(mapStateToProps)(Authentication);
}

但是现在我收到TypeError：this.context.router是未定义的。有人可以向我解释或向我指出我做错了什么吗？

Answer 1

从反应15.5开始，PropTypes库位于其自己的包prop-types中。

解决方案：

1。在项目中安装prop-types软件包：

npm i prop-types --save

2。根据需要导入并使用

import PropTypes from 'prop-types';

请注意，这还意味着您可能必须将所有依赖PropType的库升级到其post react 15.5版本。在某些情况下，某些库可能没有可用的升级，因此您将需要打开请求请求。因此，现在您已拥有解决此问题所需的所有信息。这不是一件容易的事，但是如果您想对16的功能做出反应，那是值得的。我做了升级，花了大约2到3个小时才使一切正常。

在此处了解更多信息： https://reactjs.org/warnings/dont-call-proptypes.html

Answer 2

由于罗斯·艾伦（Ross Allen）的评论，我最终使用withRouter。我当前拥有的代码如下：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

export default function (ComposedComponent) {
  class Authentication extends Component {
    static propTypes = {
      router: PropTypes.object
    }

    componentDidMount() {
      if (!this.props.authenticated) {
        const {router} = this.props;
        router.push('/login');
      }
    }

    componentWillUpdate(nextProps) {
      if (!nextProps.authenticated) {
        const {router} = this.props;
        router.push('/login');
      }
    }

    render() {
      return <ComposedComponent {...this.props} />;
    }
  }

  function mapStateToProps(state) {
    return { authenticated: state.auth.authenticated };
  }

  return withRouter(connect(mapStateToProps)(Authentication));
}

它有效，也许还有更多增强功能。

TypeError：_react2.default.PropTypes未定义

2 个答案: