安装react-proptypes后，仍然会收到PropTypes警告，升级节点模块上的代码和主要升级;

Question

我正在研究一个React项目，并试图摆脱下面关于PropTypes的警告。我已经做了很多阅读，我已经完成了所有依赖项的重大更新，安装了react-proptypes并更新了我的代码，但我仍然收到警告。

即使从我自己的代码中取出PropTypes并使用this.props.history.push（'/'），我也会得到相同的警告，所以我必须认为警告来自我的一个依赖，但它们都是到目前为止（除了[email protected]之外，我还没有升级，因为它还给我一个类似的createComponent警告）。

有什么想法吗？

下面是我使用PropTypes和package.json的代码。

警告：不推荐通过主React包访​​问PropTypes，并将在React v16.0中删除。请使用npm中最新的v15。* prop-types软件包。

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

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

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

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

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


  function mapStateToProps(state) {
    return {
      authenticated: state.auth.authenticated,
      email: state.auth.email
  };
 }
  return connect(mapStateToProps)(Authentication);
}

的package.json：

"author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^8.0.2",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babel-preset-stage-0": "^6.24.1",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "css-loader": "^0.28.11",
    "eslint-config-rallycoding": "^3.2.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^15.0.1",
    "style-loader": "^0.21.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-core": "^6.2.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-stage-1": "^6.1.18",
    "cloudinary-core": "^2.5.0",
    "cloudinary-react": "^1.0.6",
    "dotenv-webpack": "^1.5.5",
    "file-loader": "^1.1.11",
    "jquery": "^2.2.4",
    "jsdom": "^8.1.0",
    "lodash": "^4.1.0",
    "prop-types": "^15.6.1",
    "react": "^15.6.2",
    "react-bootstrap": "^0.32.1",
    "react-day-picker": "^7.1.6",
    "react-dom": "^15.6.2",
    "react-dropzone": "^5.0.1",
    "react-helmet": "^5.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.0.0",
    "react-stripe-elements": "^2.0.1",
    "redux": "^4.0.0",
    "redux-form": "^6.8.0",
    "redux-thunk": "^2.2.0",
    "sha1": "^1.1.1",
    "webpack": "^4.17.2"
  }

Answer 1

你需要像这样设置

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

export default function (AuthRequiredComponent) {
  class Authentication extends Component {

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

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

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

  Authentication.propTypes = {
     router: PropTypes.object
  }

  function mapStateToProps(state) {
    return {
      authenticated: state.auth.authenticated,
      email: state.auth.email
  };
 }
  return connect(mapStateToProps)(Authentication);
}