【问题标题】:Uncaught TypeError: Cannot read property 'bool' of undefined未捕获的类型错误:无法读取未定义的属性“布尔”
【发布时间】:2018-04-14 12:05:19
【问题描述】:
{
  "name": "xxx-react",
  "version": "1.0.1",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server --hot --port 3002 --open --inline",
    "build": "cross-env NODE_ENV=production rimraf dist && webpack",
    "package": "webpack -p",
    "test": "cross-env NODE_ENV=test && jest"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "8.2.3",
    "babel-jest": "22.4.3",
    "babel-loader": "7.1.4",
    "babel-plugin-root-import": "^5.1.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "case-sensitive-paths-webpack-plugin": "1.1.4",
    "cross-env": "5.0.0",
    "css-loader": "^0.28.11",
    "css-sourcemaps-webpack-plugin": "1.0.3",
    "enzyme": "^3.1.0",
    "eslint": "3.8.1",
    "eslint-config-react-app": "0.5.2",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.4.1",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.24.0",
    "jest": "^21.2.1",
    "json-loader": "0.5.7",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "node-sass": "^4.5.2",
    "object-assign": "4.1.1",
    "path": "^0.12.7",
    "promise": "7.1.1",
    "react": "16.3.1",
    "react-dom": "^16.3.1",
    "react-test-renderer": "16.3.1",
    "rimraf": "2.6.1",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "whatwg-fetch": "2.0.2"
  },
  "dependencies": {
    "autoprefixer-loader": "3.2.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap-loader": "2.2.0",
    "bootstrap-sass": "3.3.7",
    "country-data": "0.0.31",
    "es6-promise": "^4.2.4",
    "eslint-plugin-flowtype": "^2.42.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.6.1",
    "history": "3.2.1",
    "moment": "2.22.0",
    "prop-types": "^15.6.1",
    "react-addons-shallow-compare": "^15.6.2",
    "react-async-script": "0.9.1",
    "react-big-calendar": "^0.17.0",
    "react-bootstrap": "0.31.0",
    "react-dates": "13.0.2",
    "react-dropzone": "3.13.1",
    "react-facebook-login": "3.5.0",
    "react-google-maps": "6.3.0",
    "react-google-recaptcha": "0.9.3",
    "react-polyfill": "0.0.2",
    "react-prop-types-element-of-type": "^2.2.0",
    "react-recaptcha": "2.2.6",
    "react-redux": "5.0.7",
    "react-router": "3.2.0",
    "react-scrollbar-js": "^1.0.1",
    "react-transition-group": "^2.3.0",
    "redux": "3.6.0",
    "redux-logger": "2.8.2",
    "redux-persist": "4.4.2",
    "redux-promise": "0.5.3",
    "redux-router": "2.1.2",
    "redux-thunk": "2.2.0",
    "resolve-url-loader": "2.0.2",
    "validator": "7.0.0"
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

</pre>

<pre>
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import CSSTransitionGroup from 'react-transition-group';

export default class SimpleAnimation extends PureComponent {
    render() {
        const {children, transitionName, ...props} = this.props;
        const transitions = {
            enter: `${transitionName}-entering`,
            enterActive: `${transitionName}-entered`,
            leave: `${transitionName}-leaving`,
            leaveActive: `${transitionName}-left`,
            appear: `${transitionName}-entering`,
            appearActive: `${transitionName}-entered`
        };

        return (
            <CSSTransitionGroup {...props} transitionName={transitions}>
                {children}
            </CSSTransitionGroup>
        );
    }
}

SimpleAnimation.defaultProps = {
    className: '',
    transitionName: 'component',
    transitionAppear: true,
    transitionEnter: true,
    transitionLeave: true,
    transitionAppearTimeout: 500,
    transitionEnterTimeout: 500,
    transitionLeaveTimeout: 500
};

SimpleAnimation.PropTypes = {
    className: PropTypes.string,
    transitionName: PropTypes.string,
    transitionAppear: PropTypes.bool,
    transitionEnter: PropTypes.bool,
    transitionLeave: PropTypes.bool,
    transitionAppearTimeout: PropTypes.number,
    transitionEnterTimeout: PropTypes.number,
    transitionLeaveTimeout: PropTypes.number
};

这是我们的 package.json 和一段代码。我试过以下命令: npm install --save prop-types 但我仍然遇到同样的错误:

未捕获的类型错误:无法读取未定义的属性 'bool'

我还清理了 npm 缓存和 npm run build 命令。 提前致谢。

我写了console.log(PropTypes),看来我应该使用checkPropTypes()

【问题讨论】:

  • 您使用的是什么版本的nodenpm
  • 节点版本为:v8.9.1 npm 版本为:5.8.0
  • 应该是SimpleAnimation.propTypes
  • 做了,还是一样。
  • 尝试将PropTypes.bool 更改为PropTypes.bool.isNotNull

标签: javascript reactjs npm undefined react-proptypes


【解决方案1】:

我认为应该是SimpleAnimation.propTypes 而不是PropTypes,因为这是these docs 中使用的内容。

【讨论】:

    【解决方案2】:

    在我将以下依赖项的版本从 16.3.1 降级到 15.4.0 后,问题已得到修复。

    "react": "15.4.0",
    "react-dom": "15.4.0",
    "react-test-renderer": "15.4.0"
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-12-22
      • 2015-01-06
      • 2017-07-26
      • 2019-02-26
      • 2021-12-25
      • 2018-02-02
      相关资源
      最近更新 更多