React新手开发遇JSX解析括号错误 无法定位问题求助

错误原因 #

你遇到的是典型的JSX语法错误，核心问题如下：

• React组件的return语句仅允许返回单个根节点，你直接返回了map生成的元素数组，没有外层根节点包裹
• JSX中用于插值表达式的{}只能写在JSX节点内部，你直接把{items.map(...)}放在return后的括号顶层，解析器会误将其识别为对象字面量，因此在读取items属性时触发语法报错，和你收到的报错位置完全匹配。

修复方案 #

按需选择以下两种常用修复方式即可：

方案1：用Fragment包裹（无多余DOM节点） #

使用React提供的Fragment短语法<></>包裹列表，不会在最终渲染的DOM中生成额外节点：

export const CategorySuite = ({items}) => {
  return (
    <>
      {items.map(item => <Item key={item.id} item={item}/>)}
    </>
  );
};

注意：数组渲染列表时必须给每一项添加唯一的key属性，否则React会抛出列表渲染警告，示例中用item.id作为key，你可以根据实际业务替换成列表项的唯一标识字段。

方案2：用DOM节点包裹（需要外层容器） #

如果你的业务需要给列表加外层样式容器，可以用div等真实DOM标签包裹：

export const CategorySuite = ({items}) => {
  return (
    <div className="category-suite">
      {items.map(item => <Item key={item.id} item={item}/>)}
    </div>
  );
};

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