Question

我很难从React / Redux应用程序中的对象访问嵌套数据。

特定页面是“个人资料”页面，详细介绍了有关患者的信息。

一个componentDidMount()生命周期方法用于调用redux操作，该操作将axios.get请求发送到快速后端。返回JSON对象，并且reducer将此对象转移到redux状态。还原状态如下（请注意“患者”对象的结构-这是我正在访问的对象。

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()中，我将'耐心'对象从redux状态中拉出：

const { patient } = this.props.patients;

，然后在return()中使用“患者”对象。如果我指的是“顶级”属性（例如name或dateOfBirth），则可以正常工作。但是，当我尝试访问嵌套属性（例如电话，电子邮件或地址）时，它会失败并显示以下错误：

TypeError: Cannot read property 'address' of undefined

如果我从下面的代码中删除了{patient.contact.address}，该组件将呈现良好的效果-包括对{patient.name}和{patient.dateOfBirth}的引用，然后将其放回原处。

我也尝试过将“接触”物体从道具中拉出，但失败了。加载后，所有数据均处于预期的还原状态-如果我从道具中拉出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方法获取数据并更新存储，因此contacts对象在首次渲染时可能不可用，因此会出现错误。使用前请先检查是否存在

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

无法访问React组件中对象上的嵌套属性

1 个答案: