React项目babel-loader编译报错：Unexpected token, expected ","求助

你的代码存在大括号与括号不匹配、JSX结构语法错误，导致Babel无法正确解析，具体问题和修正如下：

错误点分析 #

1. 内层image.comment.map的闭合符号位置错误：你在image.comment.map的回调函数结束后，没有正确闭合map的调用括号，就直接用}结束外层div，破坏了语法结构
2. 外层props.image.map的闭合符号冗余且位置错误：末尾多余的}和)导致语法解析混乱
3. JSX层级不匹配：部分div标签没有正确闭合

修正后的代码 #

{props.image.map((image, index) => {
  return (
    <div key={index}>
      <img src={image.image} alt={image.title} />
      <div>
        {image.comment.map((comments, commentsIndex) => {
          return (
            <div key={commentsIndex}>
              <p>{comments.name}</p>
              <p>{comments.comment}</p>
              <p>{comments.timestamp}</p>
            </div>
          )
        })}
      </div>
    </div>
  )
})}

关键修改说明 #

• 给image.comment.map补充了闭合的})，确保数组方法调用完整
• 移除了末尾多余的}和)，让外层props.image.map的调用结构正确
• 调整了div标签的闭合位置，保证JSX层级结构完全匹配

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