组件定义缺少显示名称 react/display-name 错误

Question

我想将一个项目上传到 Vercel NextJS，它说我缺少显示名称反应。根据我用谷歌搜索的内容，当函数未正确导出时会出现此错误？这是我的代码，你知道吗？

这是 vercel 上的错误：错误：组件定义缺少显示名称 react/display-name（以及下面此文件的路径）

import React from "react";

import MaterialTable from "material-table";

function ItemsList(props) {
  const array = [];

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

  console.log(array);

  const columns = [
    {
      title: "Item picture",
      field: "imageUrl",
      render: (rowData) => <img src={rowData.imageUrl} style={{width: 200}} />,
    },

    {title: "Item title", field: "itemTitle"},
    {title: "Sold items", field: "itemsSold", type: "numeric"},
  ];

  return <MaterialTable columns={columns} data={array} title="Items" />;
}
export default ItemsList;

Answer 1

你得到这个错误是因为这个函数被认为是一个没有名字的组件（匿名函数）。

(rowData) => <img src={rowData.imageUrl} style={{width: 200}} />

您应该可以通过给函数命名来修复它：

{
  render: function myRender (rowData){return <img src={rowData.imageUrl} style={{width: 200}} />},
}

组件定义缺少显示名称 react/display-name 错误

Component definition is missing display name react/display-name error

reactjs

next.js

vercel