Next.js部署Vercel报react/display-name缺失错误如何解决

报错原因 #

你遇到的react/display-name报错并非来自顶层的ItemsList组件，而是来自columns配置项中render字段对应的匿名箭头函数：(rowData) => <img src={rowData.imageUrl} style={{width: 200}} />。ESLint的该规则要求所有返回JSX的函数都要有明确的显示名称，匿名函数不符合要求因此触发报错。

解决方法 #

你可以选择以下任意一种方案处理：

• 方案1：将匿名函数改为命名函数
  直接修改render对应的函数为带名称的函数即可符合规则要求：

  {
    title: "Item picture",
    field: "imageUrl",
    render: function renderItemImage(rowData) {
      return <img src={rowData.imageUrl} style={{width: 200}} />;
    },
  }
  

• 方案2：添加单行ESLint忽略注释
  如果你不想修改函数写法，可以在对应行上方添加忽略注释，绕过当前行的规则检查：

  {
    title: "Item picture",
    field: "imageUrl",
    // eslint-disable-next-line react/display-name
    render: (rowData) => <img src={rowData.imageUrl} style={{width: 200}} />,
  }
  

• 方案3：全局关闭该规则（可选）
  如果项目中大量存在这类临时渲染函数，你可以修改项目根目录的ESLint配置文件（如.eslintrc.json），直接关闭该规则：

  {
    "rules": {
      "react/display-name": "off"
    }
  }
  

额外代码优化建议 #

你现有代码中处理props.items的逻辑存在冗余，可以直接把map返回的结果赋值给变量，不需要额外声明空数组再赋值：

const array = props.items.map((item) => ({
  id: item.idItem,
  imageUrl: item.itemPicture,
  itemTitle: item.itemTitle,
  itemsSold: item.count,
}));

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