如何在React中访问API JSON响应里的嵌套数组？

你的代码存在以下几个关键错误： #

• 箭头函数语法混乱：内层map的参数定义错误，不仅重复使用了外层的item变量名，还写错了箭头函数的基本格式，导致无法正确遍历ltm数组。
• 多余的JSX包裹符号：自执行函数的return语句里多套了一层{}，React中直接返回JSX元素即可，不需要额外的大括号包裹。
• 数组长度判断逻辑错误：判断是否为最后一个元素时，(item.ltm.ltmNumber).length完全错误——ltmNumber是单个数字，没有length属性，应该和item.ltm.length（整个ltm数组的长度）做比较。
• 变量命名冲突：外层map的参数是item，内层map又用item作为参数，会导致变量覆盖，引发逻辑错误。

修正后的完整代码： #

return (
    <TableContainer>
        <TableBody>
            {dataPagedSortedAndFiltered().sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1).map((item, id) => (
            <TableRow key={item.id} >
                <TableCell>Name: {item.name}</TableCell>
                <TableCell>Value: {item.value}</TableCell>
                <TableCell>Type: {item.type}</TableCell>
                <TableCell>
                    {(() => {
                        // 增加ltm字段存在性判断，避免无此字段时报错
                        if (!item.ltm || item.ltm.length === 0) { 
                            return "None"; 
                        }
                        return item.ltm.map((ltmItem, index) => (
                            <span key={ltmItem.ltmId}> 
                                {ltmItem.ltmNumber}
                                {index !== item.ltm.length - 1 ? ', ' : ''}
                            </span>
                        ));
                    })()}
                </TableCell>
            </TableRow>
            ))}
        </TableBody>
    </TableContainer>
);

额外优化点说明： #

• 增加!item.ltm的判断，避免API返回数据中不存在ltm字段时出现报错。
• 用ltmItem.ltmId作为key比用index更可靠，防止数组元素变动时引发不必要的组件重渲染。
• 建议把排序逻辑提到组件外部，避免每次组件渲染都重复执行排序操作，提升性能。

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