如何在Redux的device状态中正确调用deviceData下的嵌套变量？

• 当前device.deviceData为数组类型，并非直接挂载device_id、device_name、group_id字段的对象。直接序列化整个deviceData能看到全部内容，只是打印了数组的完整存储内容，不代表数组本身拥有这些字段，因此device.deviceData.device_id本质是访问数组上不存在的属性，自然无法返回内容。
• 此前尝试的device.deviceData.0.device_id写法触发报错，是因为JS语法规则限制：点运算符后的属性名不能以数字开头，访问数字键必须使用方括号语法device.deviceData[0].device_id。但硬编码数字索引的可维护性极差，后续数据顺序变动、长度调整都容易触发空值异常，不推荐使用。

批量展示全部设备字段 #

直接通过数组原生遍历方法（如map）处理整个deviceData数组，无需提前感知数组长度、无需写死索引，无论数组内有多少条数据都能正常运行：

// 配合可选链?.做容错，避免接口未返回数据时触发空值报错
{device.deviceData?.map((deviceItem) => (
  <div key={deviceItem.device_id}>
    <span>设备ID：{deviceItem.device_id}</span>
    <span>设备名称：{deviceItem.device_name}</span>
    <span>所属分组ID：{deviceItem.group_id}</span>
  </div>
))}

筛选取单条匹配设备字段 #

如果需要从设备数组中获取符合特定条件的设备，无需硬编码索引，通过数组的find方法匹配目标条件即可：

// 示例：匹配device_id为指定值的目标设备
const currentDevice = device.deviceData?.find(item => item.device_id === 目标匹配值)
// 渲染时通过可选链兜底空值
<p>当前选中设备名称：{currentDevice?.device_name}</p>

补充说明：Redux DevTools中如果看到deviceData结构带数字索引（如0: {device_id: xxx}），这是数组的典型展示形式，并非普通对象。

内容的提问来源于stack exchange，提问作者Henrik