PropTypes in react es6 funktioniert nicht

Question

Ich habe eine Komponente erstellt und möchte eine ihrer Eigenschaften validieren. Aber es scheint, dass die Validierung nicht funktioniert. Wenn ich auf diese Komponente zugreife, kam ich immer unter die Eigenschaft undefined Fehler:

Cannot read property 'map' of undefined

Unten ist meine Komponentendefinition.

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', 
    } 
} 

Ich glaube unten Code wird verwendet, um die Eigenschaft dieser Komponente zu überprüfen.

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

aber es beschwert sich immer noch, dass die Diagnose ist ein undefiniertes Objekt.

Vermisse ich etwas oder missverstehe ich die PropTypes-Validierung? Was ist das erwartete Verhalten von PropTypes?

Dank

Answer 1

Der Fehler tritt auf, weil die diagnostics prop keinen Standardwert bekommt. Wenn Sie die Requisite nicht bestehen, wird sie auf undefined gesetzt. Um die Situation zu beheben, können Sie defaultProps wie folgt festgelegt:

DiagnosticSchedule.defaultProps = { 
    diagnostics: [] 
};