Переменная состояния Redux не определена

Question

Было задано довольно много подобных вопросов, но я не смог найти ответ на мою проблему.

Вот мой компонент 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;
    }
}

Когда я делаю 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
});

РЕДАКТИРОВАТЬ 2: Действие:

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

Answer 1

Я использовал JSON.parse(JSON.stringify()) в файле action.payload, который, похоже, решил проблему.

Answer 2

Вы вызываете this.props.getPassengerProfile() в componentDidMount, что означает, что компонент уже смонтирован и визуализирован до заполнения состояния из этого значения.Я бы просто добавил чек в ваш рендер, чтобы он не выдавал ошибку, а затем, когда он туда попадет, он должен отображаться правильно.Как это:

render() {
  //console.log(this.props.transit);
  console.log(this.props);
  return (
    <View>
      <Text>{this.props.passenger ? this.props.passenger.pid : ''}</Text>
    </View>
  );
}