API获取歌曲数据后访问uri报Cannot read properties of undefined (reading '1')

错误Cannot read properties of undefined (reading '1')的根源是：当data?.hub?.actions返回undefined或null时，你直接尝试通过[1]访问索引，这相当于对undefined执行数组索引操作，自然会抛出错误——可选链?.只作用到.属性访问，[]索引访问需要单独添加可选链保护。

修复方案1：给索引访问添加可选链（最简洁） #

直接在数组索引前加上?.，让每一步访问都具备空值保护：

const songTitleEl = chartData.map(data =>(
    <ChartSongs key={data.key} audio={data?.hub?.actions?.[1]?.uri}/>
))

这样只要actions是undefined/null，或者索引1对应的元素不存在，整个表达式都会返回undefined，不会触发报错。

修复方案2：增加数组有效性判断（更严谨） #

如果需要对无效情况设置默认值（比如空字符串、null），可以先校验actions是否为有效数组且长度足够：

const songTitleEl = chartData.map(data => {
    let audioUri = null;
    const actions = data?.hub?.actions;
    // 确认actions是数组且至少有2个元素
    if (Array.isArray(actions) && actions.length >= 2) {
        audioUri = actions[1].uri;
    }
    return <ChartSongs key={data.key} audio={audioUri}/>
})

额外排查点 #

如果修复后仍有问题，可以检查：

• chartData中是否存在没有key属性的元素（虽然这不会触发当前报错，但可能导致React渲染警告）
• API返回的actions是否有时是其他类型（比如对象而非数组），这种情况也会导致索引访问失败

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