Question

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

即使从我自己的代码中取出PropTypes并使用this.props.history.push（'/'）代替，我也收到相同的警告，所以我不得不认为警告来自我的一个依赖项，但它们都是最新的（redux-form@7.4除外，我没有升级，因为它另外给了我类似的createComponent警告）。

关于为什么的任何想法？

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

警告：不赞成通过主React包访问PropType，并将在React v16.0中删除。使用最新的可用v15。* 来自npm的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);
}

在节点模块上安装react-proptypes，升级代码和重大升级后，仍然会收到PropTypes警告；

1 个答案: