[英]Access object nested in React object prop
I am trying to access a nested object in a React JS prop passed to a component. 我试图访问传递给组件的React JS道具中的嵌套对象。
this.props.object
works when I log it in the console but I get an error saying that a
is undefined when I try to access this.props.object.a
. 当我在控制台中登录时,
this.props.object
可以工作,但是当我尝试访问this.props.object.a
时, 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 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 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
works as expected but when I try to access venue.photo.source
it gives me the above error. venue.name
可以按预期工作,但是当我尝试访问venue.photo.source
时,出现了以上错误。
I am new to react and there is probably a simple reason that I am missing. 我是新来的反应者,可能是我想念的一个简单原因。
If the object
prop is from some async action, it may be that you're trying to log object.a
before object
is defined. 如果
object
prop来自某个异步操作,则可能是您在定义object
之前尝试记录object.a
。
Checking that it's defined may solve your problem. 检查它的定义可能会解决您的问题。
this.props.object && console.log(this.props.object.a)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.