反应es6中的PropTypes不起作用

我创建了一个组件并希望验证其属性之一。但它似乎验证不起作用。当我访问这个组件时，我总是得到属性undefined错误：反应es6中的PropTypes不起作用

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

感谢

来源

2016-06-11 Zhao Yi

代替'getDefaultProps（）'尝试设置的'DiagnosticSchedule.defaultProps = {...}'。 –

是的，它的工作原理。我漫步DiagnosticSchedule.propTypes在这里做什么。如果我没有DiagnosticSchedule.defaultProps，我的代码会产生问题。 –

'getDefaultProps（）'仅适用于'React.createClass'。 –

错误发生，因为diagnostics道具没有得到一个默认值。如果您不通过道具，它将被设置为undefined。要解决这种情况，你可以设置defaultProps这样的：

DiagnosticSchedule.defaultProps = { 
    diagnostics: [] 
};

来源

2016-06-11 13:01:42

反应es6中的PropTypes不起作用

回答

相关问题