Question

因此，我正在关注有关道具验证的React教程，并且尝试在网页上显示不同类型的数据，但出现错误消息，指出数组未定义

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

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  render() {
  return (
    <div>

      <img src={logo} className="App-logo" alt="logo" />
       <h3>Array:{this.props.thisArray}</h3>
       <h3>Bool:{this.props.thisBool ? 'True':'False'}</h3>
       <h3>Func:{this.props.myFunction(4)}</h3>
       <h3>Number:{this.props.thisNumber}</h3>
       <h3>String:{this.props.thisString}</h3>
       <h3>Object:{this.props.thisObject.name}</h3>
    </div>

  );
}
}
App.mytypes = {
  thisArray: React.PropTypes.array.isRequired,
  thisBool: React.PropTypes.bool.isRequired,
  myFunction: React.PropTypes.func,
  thisNumber: React.PropTypes.number,
  thisString: React.PropTypes.string,
  thisObject: React.PropTypes.object

}
App.showValues = {
  thisArray: [2,4,6,8,10],
  thisBool: 'True',
  myFunction: function(r){ return r},
  thisNumber: 45,
  thisString: "Ki be pakoli",
  thisObject: {
     name:"Bilu"
  }
}
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

Answer 1

您需要将原型导入为

App.propTypes  = {
  thisArray: PropTypes.array.isRequired,
  thisBool: PropTypes.bool.isRequired,
  myFunction: PropTypes.func,
  thisNumber: PropTypes.number,
  thisString: PropTypes.string,
  thisObject:PropTypes.object

}

另外，您需要将其用作

{{1}}

Answer 2

我认为问题出在

React.PropTypes.array.isRequired

从以下位置导入PropType：

import PropTypes from 'prop-types';

然后将React.PropTypes.array.isRequired更改为PropTypes.array.isRequired

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

2 个答案: