Javascript 通过对象数组进行映射

我试图映射以下数据并返回“Balance”，但它一直告诉我“coding”是未定义的

这里是阵列

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

import React，{Component}来自'React'；
从“./设备/设备”导入设备；
从“axios”导入axios；
类设备扩展组件{
状态={
设备：空
}
componentDidMount（）{
axios.get（）http://hapi.fhir.org/baseDstu3/Device?organization=1980437&_include=Device:organization&_sort=device-名称'）
。然后（res=>{
this.setState（{devices:res.data.entry}）；
})
.catch（错误=>{
console.log（错误）；
})
}
render（）{
让设备=
这个从业者没有设备！
；
if（this.state.devices）{
设备=this.state.devices.map（设备=>{
返回(
)
});
}
返回(
{设备}
);
};
};
导出默认设备；

id返回良好，但对于名称，它不断获取“无法读取未定义的属性‘编码’”

---

我做错了什么？

有问题。您将获得未定义的

，因为您接收的最后一个对象中不包含

类型

属性。请查收

试试这样的

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

{this.state.devices.map（device=>{
如果（device.resource.type）{//首先检查类型属性是否存在，然后呈现
console.log（device.resource.type.coding[0].显示）；
返回(

{device.resource.type.coding[0]。display}

);
}否则返回null；
})}

根据给出的信息，它找不到“type”变量。你能为我创建一个沙箱看看吗？