React函数组件中不使用map访问嵌套数组内对象指定data属性的方案及报错解决

你的报错原因很明确——访问路径的顺序搞反了！让我们拆解一下问题：

你写的 <AudioPlayer src={accordionItems[1].items.data[1]} /> 里，accordionItems[1].items 是一个数组，不是对象，所以它根本没有data属性，自然会抛出Cannot read property '1' of undefined的错误。正确的访问逻辑应该是先定位到items数组里的具体元素，再取该元素的data属性。

正确的直接访问写法 #

要获取某个特定的data值，你需要按照这个层级路径访问：
外层数组索引 → 目标分类对象 → items数组元素索引 → data属性

比如你想获取Radio分类下第2个（索引为1）项的data，正确写法是：

<AudioPlayer src={accordionItems[1].items[1].data} />

优化可读性的写法（可选） #

如果觉得直接写长路径不够清晰，你可以把目标数据提前赋值给变量，代码会更易维护：

// 比如获取Contact分类下第1个（索引为0）项的data
const selectedTrack = accordionItems[2].items[0].data;

然后在组件中使用：

<AudioPlayer src={selectedTrack} />

注意事项 #

• 确保你使用的索引是有效的（比如数组长度大于索引值），避免出现数组越界的错误。
• 这种直接通过索引访问的方式完全符合你不想用map的需求，适合需要精准定位特定元素的场景。

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