React类组件嵌套数组map遍历无法正确获取数据问题咨询

• 多余的嵌套数组包裹：代码中const arrayItems = [this.props.items.edges]这步给本身已是数组的items.edges额外套了一层数组，导致外层map仅会执行1次遍历，拿到整个完整的edges数组；后续内层map执行次数恰好等于edges数组内的对象数量，就是你观察到的“循环次数匹配”的现象来源。
• 隐式类型转换导致打印看不到对象内容：代码中使用字符串加号拼接对象的写法（"The current item is: " + currentItem），会触发JavaScript的隐式toString转换，把对象直接输出为[object Object]，自然无法看到具体的属性数据。
• 典型GraphQL数据源结构适配问题：如果该数据是来自GraphQL查询的edges字段，每个数组项本身是包裹了一层node字段的结构，你实际需要的业务数据全部位于edge对象的node子属性下，直接读取edge对象本身自然拿不到预期的业务字段。

class Menu extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        // 移除多余的外层数组包裹，直接使用原生edges数组作为遍历源
        const menuItems = this.props.items.edges
        return menuItems.map((edgeItem, index) => {
            console.log("当前遍历位置：", index)
            // 将对象作为独立参数传入console.log，避免隐式类型转换
            console.log("当前edge节点完整结构：", edgeItem)
            // 取嵌套的node节点，拿到实际业务字段
            const actualMenuData = edgeItem.node
            return (
                <div key={actualMenuData.id}>
                    {actualMenuData.title}
                </div>
            )
        })
    }
}

• 控制台打印对象时，不要使用加号做字符串拼接，使用逗号分隔多参数传入console.log，浏览器会自动渲染可展开的对象结构树，能直接看到所有嵌套属性
• 如果数据结构存在多层嵌套，不需要刻意嵌套多层map，可以在拿到每一层对象后按需读取子属性即可
• map方法需要返回最终的渲染内容或处理后的数据，不要仅在遍历内做无返回的操作
• 如果map的目的是生成可渲染的组件列表，需要把map逻辑放在组件的render方法中，constructor中执行的map返回值不会被组件自动渲染到页面上

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