ReactJS嵌套数组映射报错求助：Unexpected token, expected ","

你的代码出现Parsing error: Unexpected token, expected ","的原因是：React的JSX语法要求，任何返回的JSX内容必须有单个根元素，而你在categories.map的回调里直接并列了两个元素（父分类的<Nav.Link>和子分类的映射结果），这不符合语法规范。

修正方案 #

用React.Fragment（或简写<>）把并列的元素包裹起来，也可以用<div>等容器元素（如果不影响页面样式的话）。同时记得给子分类的<Nav.Link>添加key属性，符合React列表渲染的最佳实践。

修正后的代码示例：

{categories.map((row, key) => (
  <>
    <Nav.Link href="#" key={key}>{row.cat_name}</Nav.Link>
    {row.sub_cat.map((subcat, sub_key) => ( 
      <Nav.Link href="#" key={sub_key}>{subcat.cat_name}</Nav.Link>
    ))}
  </>
))}

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