React JSX嵌套map渲染HTML元素报错求助

问题场景 #

在React组件List.js中遍历JSON数据渲染页面时，外层的.map()可以正常渲染module_item，但添加包含module_item_list长度判断的嵌套.map()时出现语法错误，控制台能正确获取数据但无法在页面渲染。JSON数据中module_item_list可能为空数组，此时仅需显示对应的module_item_name。

错误原因 #

1. JSX返回值限制：React组件的return语句只能返回单个根元素，原代码中return后同时返回了两个独立元素（module_item的<div>和嵌套条件渲染块），违反了这个规则。
2. JSX注释规范：在JSX的{}代码块内，不能使用//单行注释，需改用/* */多行注释格式。

修正后的代码 #

// import { } from "react-icons";
import { Link } from "react-router-dom";

function List({ module }) {
    const icons = {
        // icons定义
    }

    return (
        <>
            <div className="card my-3 rounded-0">
                {/* Module Header */}
                <div className="card-header px-0 list-group-item-secondary">
                    <div className="btn-group mx-2 align-items-center" role="group">
                        {/* 按钮元素 */}
                    </div>
                    <div className="float-end">
                        <div className="d-flex align-items-center">
                            {/* 头部HTML内容 */}
                        </div>
                    </div>
                </div>

                {/* Module Items List */}
                {module.module_items.length > 0 && (
                    <ul className="list-group list-group-flush">
                        {/* 遍历module_items */}
                        {module.module_items.map((module_item, idx) => {
                            return (
                                // 用Fragment包裹多个子元素，也可改用普通div
                                <>
                                    <div key={idx} className="list-group-item list-group-item-action" aria-current="true">
                                        <div className="row list-item-row">
                                            {/* 渲染module_item_name等内容 */}
                                        </div>
                                    </div>

                                    {/* 判断子列表长度并遍历渲染 */}
                                    {module_item.module_item_list.length > 0 && (
                                        module_item.module_item_list.map((module_sub_list_item, i) => {
                                            return (
                                                <div key={i}>
                                                    {/* 渲染子项内容，例如子项名称 */}
                                                    {module_sub_list_item.name}
                                                </div>
                                            )
                                        })
                                    )}
                                </>
                            )
                        })}
                    </ul>
                )}
            </div>
        </>
    );
}

export default List;

关键修正点说明 #

• 根元素包裹：用React Fragment（<>和</>）或普通<div>将return中的多个元素包裹，确保return只返回单个根节点。
• 注释格式修正：JSX代码块内的注释需改用/* */格式，避免语法错误。
• 添加唯一key：嵌套.map()循环必须为每个子元素添加唯一key属性（示例用循环索引，实际项目建议使用数据自身的唯一ID以提升渲染稳定性）。

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