Невозможно получить доступ к вложенным атрибутам объекта в компоненте React

Question

У меня проблемы с доступом к вложенным данным из объекта в приложении React / Redux.

Конкретная страница - это страница профиля, содержащая информацию о пациенте.

A componentDidMount() метод жизненного цикла используется для вызова действия избыточности, которое отправляет запрос axios.get в экспресс-бэкэнд.Возвращается объект JSON, и редуктор переводит его в состояние редукции.Состояние приведения приведено ниже (обратите внимание на структуру объекта «пациент» - это объект, к которому я обращаюсь.

Redux
|-- auth
|   |-- isAuthenticated
|   +-- user
|       |-- name
|       |-- id
|       +-- isAdmin
|-- patients
|   |-- patients [ls of 'patient' objects] -> not relevant to this component
|   +-- patient
|       |-- name
|       |-- dateOfBirth
|       +-- contact
|           |-- phone
|           |-- email
|           +-- address
+-- errors

В render() я вытаскиваю объект «пациент» изсостояние приращения:

const { patient } = this.props.patients;

, а затем используйте объект «пациента» в return(). Если я ссылаюсь на атрибут «верхнего уровня» (например, name или dateOfBirth), он работает нормально. Однако,когда я пытаюсь получить доступ к вложенному атрибуту (например, телефон, электронная почта или адрес), происходит сбой с ошибкой:

TypeError: Cannot read property 'address' of undefined

Если я удаляю {patient.contact.address} из приведенного ниже кода, компонент хорошо отрисовывается - включаяссылки на {patient.name} и {patient.dateOfBirth} возвращают его обратно, и он терпит неудачу.

Я попытался также вытащить объект 'contact' из реквизита, и это не удалось. Все данные находятся в состоянии избыточности какожидается, когда он загружается - и если я console.log(patient) сразу после извлечения его из реквизита, консоль браузера показывает все данные (ничего не мешает).

Почему я могу получить атрибуты верхнего уровня пациентаобъект, но не вложенные?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Moment from 'react-moment';

import { getPatientById } from '../../redux/actions/patient.actions';

class PatientDetailed extends Component {
  componentDidMount = () => {
    if (this.props.match.params.patient_id) {
      this.props.getPatientById(this.props.match.params.patient_id);
    }
  };

  render() {
    const { patient } = this.props.patients;

    return (
      <>
        <div className="container-fluid">
          <div className="card">
            <div className="card-body">
              <div className="row">
                <div className="col-6">
                  <h6>Name:</h6>
                </div>
                <div className="col-6">{patient.name}</div>
              </div>
              <div className="row">
                <div className="col-6">
                  <h6>Date of birth:</h6>
                </div>
                <div className="col-6">
                  <Moment format="DD/MM/YYYY">{patient.dateOfBirth}</Moment>
                </div>
              </div>
              <div className="row">
                <div className="col-6">
                  <h6>Address:</h6>
                </div>
                <div className="col-6">{patient.contact.address}</div>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}

PatientDetailed.propTypes = {
  getPatientById: PropTypes.func.isRequired,
  patients: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  patients: state.patients
});

export default connect(
  mapStateToProps,
  { getPatientById }
)(PatientDetailed);

Answer 1

Поскольку вы извлекаете данные и обновляете хранилище в методе componentDidMount, объект контактов может быть недоступен при первом рендеринге, и, следовательно, вы получаете ошибку.Обеспечьте проверку существования перед использованием

<div className="col-6">{patient.contact && patient.contact.address}</div>