Объект доступа, вложенный в объект React prop

Question

Я пытаюсь получить доступ к вложенному объекту в React JS prop, переданном компоненту.

this.props.object работает, когда я заношу его в консоль, но получаю сообщение об ошибке, что a не определено при попытке доступа к this.props.object.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.a до того, как будет определена object.

Убедитесь, что он определен, может решить вашу проблему.

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