React映射对象数组时出现ESLint解析错误：Unexpected token

错误原因 #

你遇到的Parsing error: Unexpected token, expected ","错误，核心问题是组件return语句的JSX语法不规范：

• React组件的返回值必须是单个JSX元素（或Fragment），你直接将list.map()表达式用花括号裸写，会被解析器误认为是对象字面量，触发语法错误。
• return后的多行JSX内容，规范写法需要用括号包裹，避免解析歧义。

修正后的代码 #

import React, { useContext } from "react";
import { questionContext } from "../pages/App";

const Display = () => {
  const { list } = useContext(questionContext);

  const upVote = () => {
    console.log(list);
  };
  
  const downVote = () => {
    console.log(list);
  };

  return (
    // 用Fragment包裹映射结果，也可以用<div>作为父容器
    <>
      {list.map((item, index) => {
        return(
          // 必须添加唯一key属性，推荐用数据自带的唯一标识，此处先用index示例
          <div className="Display" key={index}>
            <p>{item.votes}</p>
            <button onClick={upVote}>🔼</button>
            <button onClick={downVote}>🔽</button>
            {/* 不要直接渲染整个对象，改为渲染具体属性，比如item.content */}
            <p>{item.content}</p>
            <textarea></textarea>
            <button>SUBMIT</button>
            <button>BookMark</button>
            <p>Time</p>
          </div>
        )
      })}
    </>
  );
};

export default Display;

额外注意事项 #

• key属性：映射生成的每个JSX元素必须添加唯一key，帮助React高效识别元素变化，避免性能问题和控制台警告。优先使用数据中的唯一ID（如item.id），仅在无唯一ID时使用index。
• 对象渲染：直接写{item}会显示[object Object]，需替换为对象的具体属性，比如item.title、item.description等。
• 事件优化：如果需要针对单个项操作，可将item作为参数传入事件函数，比如onClick={() => upVote(item)}。

内容的提问来源于stack exchange，提问作者Narain C A