React中嵌套Map条件渲染JSON数据的语法问题求助

我看你已经搞定了外层的Map遍历，现在卡在了内层条件渲染子数据的语法上，咱们一步步来修正：

先说说你代码里的几个关键问题： #

• 条件判断outerMap.name === 'Account' && ()里多套了一层{}，JSX中表达式只需要一层{}包裹，内层直接写逻辑即可，多余的花括号会导致语法报错
• 你遍历的是menu.firstchild，但实际上每个外层菜单对象（比如Account）自己才拥有对应的子数组，应该用outerMap.firstchild来获取当前菜单的子数据
• 渲染列表项时用了firstchild.name，但你的遍历变量是innerMap，变量名不匹配，应该改成innerMap.name

修正后的完整代码片段： #

import menu from "./data/menudata";
const MenuBar = () => {
  return (
    <MenuContainer>
      {menu.children.map((outerMap, i) => (
        <Dropdown key={i}> {/* 把key放到外层Dropdown组件上更符合React规范 */}
          <DropBtn>
            <h2>{outerMap.name}</h2>
          </DropBtn>
          <DropdownContent>
            {/* Account菜单的子项渲染 */}
            {outerMap.name === 'Account' && 
              outerMap.firstchild.map((innerMap, idx) => (
                <li key={idx}>{innerMap.name}</li>
              ))
            }
            {/* 顺便补上Design菜单的子项渲染，逻辑完全一致 */}
            {outerMap.name === 'Design' && 
              outerMap.secondchild.map((innerMap, idx) => (
                <li key={idx}>{innerMap.name}</li>
              ))
            }
          </DropdownContent>
        </Dropdown>
      ))}
    </MenuContainer>
  );
};
export default MenuBar;

额外优化建议： #

如果之后要新增更多菜单，每个都写条件判断会很繁琐。你可以给JSON里的所有子数组统一属性名（比如都改成children），这样就能用通用逻辑遍历，代码更简洁易维护：

// 假设JSON中的firstchild、secondchild都统一为children属性
{outerMap.children && outerMap.children.map((innerMap, idx) => (
  <li key={idx}>{innerMap.name}</li>
))}

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