[英]Redux state variable undefined
这里提出了很多类似的问题,但是我找不到我的问题的答案。
这是我的React组件:
class MyTransitPage extends Component {
componentDidMount() {
this.props.getPassengerProfile();
}
render() {
return (
<View>
<Text>{this.props.passenger.pid}</Text>
</View>
);
}
}
const mapStateToProps = ( state ) => {
return {
passenger: state.transit.passenger
}
}
export default connect(mapStateToProps, { getPassengerProfile })(MyTransitPage)
这是我的减速器:
const initialState = {
passenger: {}
};
export default(state = initialState, action) => {
console.log("reducer ");
console.log(action.payload);
switch(action.type) {
case 'GET_PASSENGER_PROFILE':
return { ...state, passenger: action.payload};
default:
return state;
}
}
当我在reducer中执行console.log时,我可以看到有效负载在其中:
"passenger": Object {
[20:57:55] "createdAt": "2019-02-10T13:02:40.897Z",
[20:57:55] "objectId": "YKzeH2Nh3C",
[20:57:55] "pid": "iwKHqfCQSu",
[20:57:55] "updatedAt": "2019-02-10T13:02:40.897Z",
[20:57:55] },
但是,当我尝试访问组件中的{this.props.passenger.pid}时,我得到的pid为未定义。 我找不到问题所在。 我在哪里弄错了?
编辑:根减少器:
export default combineReducers({
auth: AuthenticationReducer,
transit: TransitReducer
});
EDIT2:操作:
export const getPassengerProfile = () => {
const currentUser = Parse.User.current();
const currentUserId = currentUser._getId()
const Passenger = Parse.Object.extend('Passenger');
const query = new Parse.Query(Passenger);
query.equalTo("pid", currentUserId);
return (dispatch) => {
query.first().then(response => {
dispatch ({
type: 'GET_PASSENGER_PROFILE',
payload: response
});
});
};
}
您正在this.props.getPassengerProfile()
中调用this.props.getPassengerProfile()
,这意味着在从该值填充状态之前,该组件已经安装并呈现。 我只需要在渲染中添加一个检查,这样它就不会出错,然后在到达时应该正确显示。 像这样:
render() {
//console.log(this.props.transit);
console.log(this.props);
return (
<View>
<Text>{this.props.passenger ? this.props.passenger.pid : ''}</Text>
</View>
);
}
我在action.payload上使用了JSON.parse(JSON.stringify())
,这似乎已经解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.