ReactJS“TypeError：无法读取未定义的属性'数组'”答案

【问题标题】：ReactJS "TypeError: Cannot read property 'array' of undefined"ReactJS“TypeError：无法读取未定义的属性'数组'”
【发布时间】：2018-03-25 04:03:47
【问题描述】：

在运行此代码时，App.propTypes 的第一行出现错误

TypeError: 无法读取未定义的属性“数组”

代码：

  class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Array: {this.props.propBool ? "true" : "false"}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}


App.propTypes = {
   propArray: React.PropTypes.array.isRequired, //I got error over here
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",

   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}

我尝试搜索，但没有找到正确的解决方案。

【问题讨论】：

你使用的是哪个版本的 React？
我猜你在 React 16 上，PropTypes 已被移到另一个名为 prop-types 的包中。 - reactjs.org/warnings/dont-call-proptypes.html
@BoyWithSilverWings React 版本：16.0.0
那么，答案有你的解决方案

标签： javascript reactjs

【解决方案1】：

React 包不再包含 PropTypes。你需要安装prop-types 包和

import PropTypes from 'prop-types';

编辑：如documentation第一段所述

自 React v15.5 以来，React.PropTypes 已移至不同的包中。请改用 prop-types 库。

【讨论】：

【解决方案2】：

Prop-Types 现在是一个单独维护的库，名为 prop-types 这是来自 react-docs 的解释：https://reactjs.org/docs/typechecking-with-proptypes.html

您必须将它们导入为

import React from 'react';
import PropTypes from 'prop-types'

class App extends React.Component {
  //App here
}

App.propTypes = {
 propArray: PropTypes.array.isRequired, 
 propBool: PropTypes.bool.isRequired,
 propFunc: PropTypes.func,
 propNumber: PropTypes.number,
 propString: PropTypes.string,
 propObject: PropTypes.object
}

NPM Package

【讨论】：

我也import PropTypes from 'prop-types';，但没用
是的，添加import PropTypes from 'prop-types';后出现同样的错误
@WilliamKF 从App.propTypes 中删除 React。你的代码变成了`propArray: PropTypes.array.isRequired`并且对每个地方做同样的改变

【解决方案3】：

改变这个：

App.propTypes = {
   propArray: React.PropTypes.array.isRequired, //I got error over here
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

到：

App.propTypes = {
  propArray: PropTypes.array.isRequired,
  propBool: PropTypes.bool.isRequired,
  propFunc: PropTypes.func,
  propNumber: PropTypes.number,
  propString: PropTypes.string,
  propObject: PropTypes.object
}`

【讨论】：

【解决方案4】：

您应该将 React.PropTypes.array.* 更改为 PropTypes.array.*

App.propTypes = {
   propArray: PropTypes.array.isRequired,
   propBool: PropTypes.bool.isRequired,
   propFunc: PropTypes.func,
   propNumber: PropTypes.number,
   propString: PropTypes.string,
   propObject: PropTypes.object,
	 headerProp: PropTypes.string,
	 contentProp: PropTypes.string
}
App.defaultProps = {
		headerProp: "Header from props...",
		contentProp:"Content from props...",
		propArray: [1,2,3,4,5],
		propBool: true,
		propFunc: function(e){return e},
		propNumber: 1,
		propString: "String value...",

		propObject: {
			objectName1:"objectValue1",
			objectName2: "objectValue2",
			objectName3: "objectValue3"
		}
}

【讨论】：