React中映射二维JSON数组报错：Unexpected token, expected "," 求助

报错"Unexpected token, expected ','"的核心原因是：React组件的return语句只能返回单个根JSX元素，你当前的代码中，外层map返回了两个同级的<tr>元素（一个是显示category_title的，另一个是内层map生成的），这违反了React的JSX语法规则，导致解析失败。

修复后的代码示例 #

你可以用<React.Fragment>（或其简写形式<>...</>）将多个同级元素包裹起来，确保return只有一个根节点：

{
  formsList1.map((items, index) => {
    return (
      <>
        <tr key={items.id}>
          <td>{items.category_title}</td>
        </tr>
        {items.forms.map(frm => (
          <tr key={frm.form_title}>
            <td>{frm.form_title}</td>
          </tr>
        ))}
      </>
    );
  })
}

额外注意事项 #

• 给每个map生成的元素添加唯一的key属性（比如用items.id和frm.form_title），这是React列表渲染的最佳实践，避免性能问题和警告。
• 如果是在表格中使用，也可以考虑用<tbody>作为包裹容器，更符合HTML表格的结构规范：

{
  formsList1.map((items, index) => {
    return (
      <tbody key={items.id}>
        <tr>
          <td>{items.category_title}</td>
        </tr>
        {items.forms.map(frm => (
          <tr key={frm.form_title}>
            <td>{frm.form_title}</td>
          </tr>
        ))}
      </tbody>
    );
  })
}

内容的提问来源于stack exchange，提问作者Muhammad Shafique Attari