javascript - 为什么在映射此数组时出现空错误？

Question

我正在尝试映射我的 API 来获取节点。

这是我的 API 的格式:

[
    {
        "agent": "....",
        "managementDomain": "...",
        "node": "..."
    },
    {
        "agent": "....",
        "managementDomain": "...",
        "node": "..."
    },
...
]

我需要将其转换为 react 选择的格式:

const colourOptions = [
    { value: 'orange', label: 'Orange' },
    { value: 'yellow', label: 'Yellow' },
    { value: 'green', label: 'Green' },
    ];

我如何映射它(使用 Redux 进行状态管理):

const alarms = this.props.dataReducer.alarmDetails

const {test} = alarms.map(alarm => ({value:alarm.node, label: alarm.node}))

我收到的错误:

TypeError: Cannot read property 'node' of null

console.log(this.props.dataReducer.alarmDetails)

(288) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, null, {…}, {…}, {…}, {…}, null, {…}, {…}, null, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, null, null, null, {…}, {…}, {…}, {…}, {…}, null, {…}, {…}, {…}, {…}, {…}, {…}, …]

[0 … 99]
0:
agent: "..."
managementDomain: null
node: "..."

映射 API 以从数组中的每个对象获取节点的最佳方法是什么？

Answer 1

这个错误实际上是不言自明的。你的 map 代码没问题。问题似乎存在，数组中的某些对象为 null 或为空，因此当 javascript 尝试查找该对象上的节点属性时，它遇到了麻烦。

实际上this.props.dataReducer.alarmDetails此数据包含空值，例如..

[
    {
        "agent": "....",
        "managementDomain": "...",
        "node": "..."
    },
    {
        "agent": "....",
        "managementDomain": "...",
        "node": "..."
    },
null
...
]

所以，也许你可以过滤空值:

this.props.dataReducer.alarmDetails.filter(data=>data)

并在此处放置 map 代码

this.props.dataReducer.alarmDetails.filter(data=>data).map(d => ({value:d.node, label: d.node}))