升级 react、redux 版本后出现此错误

Question

我已经更新了 React 版本。并从 react-router-redux 跳转到 connected-react-router。下面提供 package.json 文件。 主要是在升级后的 react Latets 版本之后发生的。 所以得到以下错误。

index.js:31 Uncaught TypeError: Cannot read property 'string' of undefined
    at Object.<anonymous> (index.js:31)
    at __webpack_require__ (bootstrap 57766baaa3c8c796877e:555)
    at fn (bootstrap 57766baaa3c8c796877e:86)
    at Object.<anonymous> (Deposit.jsx:15)
    at __webpack_require__ (bootstrap 57766baaa3c8c796877e:555)
    at fn (bootstrap 57766baaa3c8c796877e:86)
    at Object.<anonymous> (MyAccount.jsx:41)
    at __webpack_require__ (bootstrap 57766baaa3c8c796877e:555)
    at fn (bootstrap 57766baaa3c8c796877e:86)
    at Object.<anonymous> (index.js:1)
(anonymous) @ index.js:31
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ Deposit.jsx:15
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ MyAccount.jsx:41
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ index.js:1
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ index.js:12
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
fn @ bootstrap 57766baaa3c8c796877e:86
(anonymous) @ bootstrap 57766baaa3c8c796877e:578
__webpack_require__ @ bootstrap 57766baaa3c8c796877e:555
(anonymous) @ bootstrap 57766baaa3c8c796877e:578
(anonymous) @ bootstrap 57766baaa3c8c796877e:578

package.json

"@commitlint/cli": "^7.6.1",
"@commitlint/config-conventional": "^7.6.0",
"antd": "^4.15.5",
"autoprefixer": "6.7.2",
"babel-core": "6.22.1",
"babel-eslint": "^7.2.3",
"babel-jest": "18.0.0",
"babel-loader": "6.2.10",
"babel-plugin-import": "^1.13.3",
"babel-preset-react-app": "~2.1.0",
"babel-runtime": "~6.20.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chai": "^4.3.4",
"chalk": "1.1.3",
"commitizen": "^3.1.2",
"connect-history-api-fallback": "1.3.0",
"copy-to-clipboard": "~3.0.5",
"cross-spawn": "4.0.2",
"css-loader": "0.26.1",
"cz-conventional-changelog": "^2.1.0",
"dateformat": "~2.0.0",
"detect-port": "1.0.1",
"dotenv": "2.0.0",
"electron": "^2.0.2",
"electron-builder": "20.2.0",
"enzyme": "~2.7.1",
"eslint": "^5.2.0",
"eslint-config-react-app": "^0.5.2",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "^2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-prettier": "^2.7.0",
"eslint-plugin-react": "6.4.1",
"eslint-plugin-react-hooks": "^1.6.0",
"excel-export": "~0.5.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.10.0",
"filesize": "3.3.0",
"foreman": "~2.0.0",
"fs": "0.0.1-security",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.3",
"husky": "^1.3.1",
"immutable": "~3.8.1",
"jest": "18.1.0",
"jsdom": "~9.11.0",
"json-loader": "0.5.4",
"less": "^2.7.2",
"less-loader": "~2.2.3",
"lint-staged": "^8.2.1",
"localforage": "~1.5.0",
"lodash": "^4.17.21",
"loglevel": "~1.4.1",
"moment": "~2.17.1",
"numeral": "~2.0.4",
"object-assign": "4.1.1",
"peerplaysjs-lib": "^0.6.0",
"perfect-scrollbar": "~0.6.11",
"postcss-loader": "1.2.2",
"prettier": "^1.19.1",
"promise": "7.1.1",
"promise-queue": "~2.2.3",
"prop-types": "^15.5.10",
"qrcode.react": "~0.6.1",
"randomstring": "~1.1.5",
"rc": "^1.2.8",
"react": "^17.0.2",
"react-addons-test-utils": "^15.6.0",
"react-dev-utils": "^0.5.0",
"react-dom": "^17.0.2",
"react-infinity-menu": "~3.2.0",
"react-modal": "^2.2.4",
"react-redux": "^7.2.4",
"react-redux-i18n": "^1.9.3",
"react-router": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "0.8.5",
"react-scroll": "^1.8.2",
"react-select": "~1.0.0-rc.3",
"react-split-pane": "0.1.63",
"react-table": "~5.5.0",
"react-test-renderer": "~15.4.2",
"recursive-readdir": "2.1.0",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-form": "^8.3.7",
"redux-immutable": "~4.0.0",
"redux-mock-store": "^1.5.4",
"redux-persist": "~4.4.2",
"redux-persist-immutable": "~4.2.0",
"redux-thunk": "^2.3.0",
"reselect": "~3.0.0",
"rxjs": "^5.4.2",
"sinon": "^3.2.1",
"standard-version": "^5.0.2",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"stylelint": "^10.1.0",
"stylelint-order": "^3.1.1",
"url-loader": "0.5.7",
"webpack": "1.14.0",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "2.0.2"

}, "依赖项": { "connected-react-router": "^6.9.1", "electron-is-dev": "0.3.0", “历史”：“^5.0.0” },

如何解决这个问题？

Answer 1

来源：https://stackoverflow.com/a/57640005/14106548

根据 ReactJS 文档/教程页面 Type Checking with PropTypes，您似乎正在尝试使用旧方法访问 PropTypes。

这是第一个错误，但您还需要更改其他错误

尝试改用这个：

import PropTypes from 'prop-types';

propTypes: {
    content: PropTypes.string.isRequired
    //Add the remaining ones
};