訪問對象嵌套在陣營對象支撐

Question

我試圖訪問一個反應JS道具傳遞給組件嵌套對象。

this.props.object當我登錄到控制檯時有效，但是當我嘗試訪問this.props.object.a時出現錯誤，說明a未定義。

Cannot read property 'source' of undefined 
at VenueDetails (VenueDetails.js:8) 
at ReactCompositeComponent.js:306 
at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:305) 
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280) 
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188) 
at Object.mountComponent (ReactReconciler.js:46) 
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371) 
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 
at Object.mountComponent (ReactReconciler.js:46) 

VenueDetailsView.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { VenueDetails } from '../presentation'; 
import { fetchVenue } from '../../redux/actions/venues'; 

class VenueDetailsView extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     venue: {}, 
    }; 
    } 

    componentDidMount() { 
    this.props.fetchVenue(this.props.match.params.id); 
    } 

    render() { 
    return (
     <VenueDetails venue={this.props.selectedVenue}/> 
    ); 
    } 
} 

const mapStateToProps = (state) => ({ 
    selectedVenue: state.selectedVenue, 
}); 

export default connect(mapStateToProps, { fetchVenue })(VenueDetailsView); 

VenueDetails.js

import React, { PropTypes } from 'react'; 
import { Card, CardMedia, CardTitle, CardText, CardActions, FlatButton } from 'material-ui'; 

const VenueDetails = ({ venue }) => { 
    return (
    <Card> 
     <CardMedia overlay={<CardTitle title={venue.name}/>}> 
     <img src={venue.photo.source}/> 
      </CardMedia> 
      <CardText> 
      </CardText> 
      <CardActions> 
      <FlatButton label="Action1" /> 
     <FlatButton label="Action2" /> 
     </CardActions> 
    </Card> 
); 
}; 

VenueDetails.propTypes = { 
    venue: PropTypes.object.isRequired, 
}; 

export default VenueDetails; 

venue.name按預期工作，但是當我試圖訪問venue.photo.source它給我上面的錯誤。

我是新來的反應，有可能是，我很想念一個簡單的理由。

Answer 1

如果object道具來自某種異步動作，可能是因爲您在object被定義之前嘗試記錄object.a。

檢查，它的定義可能會解決你的問題。

this.props.object && console.log(this.props.object.a)