React中map函数内返回JSX报Unexpected token错误如何解决？

错误原因汇总 #

• 箭头函数语法错误：map内的箭头函数使用return时没有包裹花括号，不需要显式写return的场景误用了return关键字
• JSX标签换行不规范：<单独占一行会被JS解析器识别为运算符，而非JSX标签开头
• ChatMessage组件未声明props参数，无法读取父组件传入的msg属性
• ChatMessage组件return后直接换行，触发JS自动分号插入机制，导致返回undefined而非p标签
• 闭合div标签存在多余空格：< /div>属于无效JSX语法

修复后完整代码 #

function ChatRoom() {
    const messagesRef = firestore.collection('messages');
    const query = messagesRef.orderBy('createdAt').limit(25);

    const [messages] = useCollectionData(query, {
        idField: 'id'
    });

    return (
      <div> 
        {messages && messages.map(msg => (
          <ChatMessage 
            key={msg.id}
            message={msg}
          />
        ))} 
      </div>
    )
}

function ChatMessage(props) {
    const { uid, text } = props.message
    return <p>{text}</p>
}

关键修改点说明 #

• map箭头函数用圆括号包裹JSX实现隐式返回，去掉多余的return关键字，解决语法报错
• JSX标签的<和组件名ChatMessage同行，避免解析错误
• 给ChatMessage组件添加props入参，正常接收父组件传入的message属性
• 修复闭合div标签的多余空格，改为合法的</div>
• ChatMessage的return和p标签同行，避免JS自动插入分号导致返回无效内容

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