Reactオブジェクトの中にネストされたアクセスオブジェクト

Question

コンポーネントに渡されたReact 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)