Redux状态变量未定义

时间:2019-02-14 21:07:04

标签: javascript reactjs react-native redux react-redux

这里提出了很多类似的问题,但我找不到我的问题的答案。

这是我的React组件:

int

这是我的减速机:

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)

在reducer中执行console.log时,我可以看到有效负载在其中:

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;
    }
}

但是当我尝试访问组件中的{this.props.passenger.pid}时,我得到的pid为未定义。我找不到问题所在。我在哪里弄错了?

编辑: 根减少剂:

"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]   },

EDIT2:操作:

export default combineReducers({
    auth: AuthenticationReducer,
    transit: TransitReducer
});

2 个答案:

答案 0 :(得分:0)

您正在componentDidMount中调用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>
  );
}

答案 1 :(得分:0)

我在action.payload上使用了JSON.parse(JSON.stringify()),这似乎已经解决了问题。