反应es6中的PropTypes不起作用

时间:2016-06-11 12:44:32

标签: reactjs react-proptypes

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

  

无法阅读属性' 地图'未定义的

以下是我的组件定义。

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的预期行为是什么?

由于

1 个答案:

答案 0 :(得分:2)

发生错误是因为Storage::aggregate_some_objects()道具没有获得默认值。如果您未通过道具,则会将其设置为diagnostics。要解决此问题,您可以像这样设置undefined

defaultProps