React中嵌套If与map使用报错：语法错误排查求助

首先，你的代码主要有几个关键问题导致语法错误和潜在的运行时问题，我来逐一拆解并给出修复方案：

问题1：JSX返回多个元素未包裹 #

React组件（包括map回调里的返回值）不能直接返回多个同级JSX元素，必须用一个容器包裹起来，比如React的<>（Fragment）或者普通的<div>。你现在在map里同时返回<TabsPanel>和subtabs的map结果，这会直接触发语法错误。

问题2：数据访问路径错误 #

从你提供的JSON数据来看，subtabs里的labelKey是嵌套在form对象里的，也就是subtab.form.labelKey，而不是你代码里的subtab.labelKey，这会导致渲染时获取不到正确的标签值。

问题3：未处理subtabs不存在的情况 #

第二个tab对象没有subtabs属性，如果直接调用button.subtabs.map会触发Cannot read properties of undefined (reading 'map')的错误，所以必须先判断subtabs是否存在且有长度。

问题4：缺少React要求的key属性 #

在使用map渲染列表时，每个元素都需要唯一的key属性，帮助React识别列表项的变化，避免不必要的重渲染。

修复后的完整代码 #

{/* 用可选链简化条件判断，同时添加空值合并处理 */}
{this.props.buttons?.tabs?.length > 0 && this.props.buttons.tabs.map((button) => (
  // 用Fragment包裹多个返回元素，添加唯一key
  <>
    <TabsPanel key={button.labelKey} label={button.labelKey} />
    {/* 先判断subtabs是否存在再执行map */}
    {button.subtabs?.length > 0 && button.subtabs.map((subtab) => (
      <Tabs key={subtab.form.labelKey}>
        <TabsPanel label={subtab.form.labelKey}></TabsPanel>
      </Tabs>
    ))}
  </>
))}

关键修改点说明： #

• 用**可选链操作符?.**简化多层条件判断，替代原来的嵌套if，代码更简洁且安全
• 用<>（React Fragment）包裹每个tab对应的多个JSX元素，解决多元素返回的语法问题
• 修正subtab的labelKey访问路径为subtab.form.labelKey，匹配你的JSON数据结构
• 给每个map渲染的元素添加key属性，使用数据里的labelKey作为唯一标识（如果有id字段用id会更稳妥）
• 对button.subtabs也添加了存在性判断，避免空值报错

这样修改后，语法错误会被解决，同时也处理了数据可能存在的空值情况，渲染逻辑更健壮。

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