Question

我正在尝试映射以下数据并返回“余额”，但它一直告诉我“编码”其未定义。

这里是数组

"entry": [
    {
      "resource": {
        "id": "1980438",
        "type": {
          "coding": [
            {
              "system": "https://www.medeo-health.com/uploads/1/1/8/1/118121028/s491564155970805143-c3-i1-w640_orig.jpeg",
              "code": "25062444",
              "display": "Balance"
            }
          ]
        },
        "manufactureDate": "2017-01-08",
        "expirationDate": "2020-01-08",
        "owner": {
          "reference": "Organization/1980437"
        }
      },
      "search": {
        "mode": "match"
      }
    }, ...

这是我正在尝试的：

import React, { Component } from 'react';

import Device from './Device/Device';
import axios from 'axios';

class Devices extends Component {
    state = {
        devices: null
    }

    componentDidMount() {
        axios.get('http://hapi.fhir.org/baseDstu3/Device?organization=1980437&_include=Device:organization&_sort=device-name')
            .then(res => {
                this.setState({ devices: res.data.entry });
            })
            .catch(error => {
                console.log(error);
            })
    }

    render() {

        let devices = <p style={{ textAlign: "left", margin: "0" }}>This practitioner have no devices!</p>;
        if (this.state.devices) {
            devices = this.state.devices.map(device => {
                return (
                    <Device
                        key={device.resource.id}
                        name={device.resource.type.coding[0].display}
                    />
                )
            });
        }
        return (
            <div>
                {devices}
            </div>
        );
    };
};

export default Devices;

id返回的很好，但就名称而言，它一直在显示“无法读取未定义的属性'coding'”

我做错了什么？

Answer 1

解决问题。之所以得到undefined，是因为您收到的最后一个对象在其中不包含type属性。请检查

尝试类似的东西

 {this.state.devices.map(device => {
      if (device.resource.type) { //check type property exists first then render
        console.log(device.resource.type.coding[0].display);
        return (
          <p key={device.resource.id}>
            {device.resource.type.coding[0].display}
          </p>
        );
      } else return null;
    })}

通过对象数组进行映射

1 个答案: