反应 es6 中的 PropTypes 不起作用

Question

我创建了一个组件并想验证其中一个属性。但似乎验证不起作用。当我访问这个组件时，我总是得到以下属性未定义的错误：

Cannot read property 'map' of undefined

下面是我的组件定义。

import React, {Component, PropTypes} from 'react'
import Carousel from 'nuka-carousel'

export default class DiagnosticSchedule extends Component {

  render() {
    let {style, diagnostics, afterSlide, beforeSlide} = this.props
    // if(diagnostics === undefined){
    //   return (<div/>)
    // }
    return (
      <div style={style}>
        <Carousel style={style} decorators={null} afterSlide={afterSlide} beforeSlide={beforeSlide}>
          {
            diagnostics.map(diagnostic => {
              return (
                <div style={styles.message}>
                  {diagnostic.name}
                </div>
              )
            })
          }
        </Carousel>

      </div>
    )
  }


}

DiagnosticSchedule.propTypes = {
  diagnostics: PropTypes.array.isRequired,
};


const styles = {
  carousel:{

  },
  message: {
    fontSize: 'xx-large',
    flex: 1,
    backgroundColor: 'red',
    alignSelf: 'center',
    lineHeight: '5',
    zIndex: 100,
    width: '100%',
    textAlign: 'center',
  }
}

我认为下面的代码用于验证此组件的属性。

DiagnosticSchedule.propTypes = {
  diagnostics: PropTypes.array.isRequired,
};

但它仍然抱怨诊断是一个未定义的对象。

我是否遗漏了什么或者我是否误解了 PropTypes 验证？ PropTypes 的预期行为是什么？

谢谢

Answer 1

错误的发生是因为 diagnostics 属性没有获得默认值。如果您不通过该道具，它将被设置为 undefined。要解决此问题，您可以这样设置 defaultProps：

DiagnosticSchedule.defaultProps = {
    diagnostics: []
};

反应 es6 中的 PropTypes 不起作用

PropTypes in react es6 doesn't work

reactjs

react-proptypes