如何从React state存储的嵌套JSON提取最后账户的balances.available

访问路径拆解 #

你存储在React state中的数据是单对象构成的数组，从外层到目标值的完整访问链路为：

• 取外层数组的唯一元素（索引0位置的对象）
• 从该对象中读取accounts属性，该属性为账户对象数组
• 动态读取accounts数组的最后一个元素（不要硬编码索引1，避免账户数组长度变化时取值失效）
• 从最后一个账户对象中读取balances属性，最终读取balances.available即为目标值

具体实现代码 #

在React组件中取值时，建议搭配可选链语法做空值兜底，适配state初始为空、异步加载未完成的常见场景，避免组件抛出undefined错误：

// 假设存储该数组的state变量名为transactionData
const lastAccountAvailable = transactionData?.[0]?.accounts?.[transactionData?.[0]?.accounts?.length - 1]?.balances?.available

方案说明 #

• 不推荐使用map遍历的方式实现需求：你的目标是固定取账户数组的最后一个元素，遍历属于冗余计算
• 不推荐硬编码accounts[1]的取值方式：当账户数组长度大于2、后续新增或删除账户时，硬编码索引会取到错误的对象
• 纯点符号搭配可选链的写法，代码复杂度低、无额外计算开销，是该场景下的最优实现

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