时间戳

首页 > 解决方案 > 在 node 模块上安装 react-proptypes、升级代码和重大升级后仍然收到 PropTypes 警告；

javascript - 在 node 模块上安装 react-proptypes、升级代码和重大升级后仍然收到 PropTypes 警告；

问题描述

我正在开发一个 React 项目，并试图摆脱以下关于 PropTypes 的警告。我对此进行了大量阅读，并对所有依赖项进行了重大更新，安装了 react-proptypes 并更新了我的代码，但我仍然收到警告。

即使在从我自己的代码中取出 PropTypes 并改用 this.props.history.push('/') 后，我也会收到相同的警告，所以我不得不认为警告来自我的依赖项之一，但它们都已启动-to-date（除了 redux-form@7.4 之外的所有内容，我没有升级它，因为它还给了我一个类似的 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);
}

包.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"
  }

标签： javascriptreactjsreact-proptypes

解决方案

你需要这样设置

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

推荐阅读