为何我的React函数无法正确返回HTML代码生成预期菜单结构

问题原因 #

你修改后子菜单无内容的核心问题是错误使用forEach做遍历渲染：
forEach方法执行后无返回值，最终返回undefined，因此你放在SubMenu内部的遍历逻辑没有输出任何可渲染的节点，子菜单自然是空的。
另外你拆分两个函数的方案存在冗余，也可以直接调整原有逻辑解决嵌套push的问题，不需要拆分两个函数。

修复方案 #

把所有用来渲染子项的forEach替换为map即可，同时可以简化代码结构，避免重复逻辑：

// 递归生成菜单节点，直接返回对应组件，不需要内部push
function renderMenu(category) {
  if (category.children.length !== 0) {
    return (
      <SubMenu label={category.name}>
        {/* 用map代替forEach，收集所有子节点返回 */}
        {category.children.map(child => renderMenu(child))}
      </SubMenu>
    )
  } else {
    return <MenuItem>{category.name}</MenuItem>
  }
}

// 统一收集一级菜单即可，不会出现嵌套push的问题
function AddMenu(category) {
  categoriesStyled.push(renderMenu(category))
}

如果要保留你原来的拆分写法，只需要把两个函数里的forEach都换成map也能修复问题：

function AddSubMenu(category) {
    if (category.children.length !== 0) {
        return (<SubMenu label={category.name}>
            {category.children.map((catchild) => AddSubMenu(catchild))}
            </SubMenu>);
    }
    else {
        return (<MenuItem>{category.name}</MenuItem>);
    }
}

function AddMenu(category) {            
    if (category.children.length !== 0) {                
        categoriesStyled.push(<SubMenu label={category.name}>
            {category.children.map((catchild) => AddSubMenu(catchild))}
        </SubMenu>);
    }
    else {
        categoriesStyled.push(<MenuItem>{category.name}</MenuItem>);
    }
}

补充说明 #

之前嵌套push导致所有分类都跑到主菜单的问题，本质是你递归调用AddMenu的时候，每次调用都会往全局的categoriesStyled数组里push节点，子分类的节点直接被push到了主菜单数组里，而不是作为父菜单的子元素存在，改成递归返回节点再由父级收集的逻辑就可以彻底避免这个问题。

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