错误：组件定义缺少显示名称

Question

我有以下代码使用 react-table 钩子。 Vercel 编译显示以下错误消息： 49:15 错误：组件定义缺少显示名称 react/display-name，其中第 49 行在下面的代码中指示。

const tableHooks = (hooks) => {
    hooks.visibleColumns.push((columns) => [
      ...columns,
      {
        accessor: "status",
        Header: "Status",
        Cell: ({ row }) => (  // Line 49
          <h6
            className={classes.editstatus}
            onClick={() => bookingDetailHandler(row.original.brewery_type)}
            value={row.original.brewery_type}
          >
            {row.original.brewery_type}
          </h6>
        ),
      },
    ]);
  };
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    state: { pageIndex, pageSize },
    setPageSize,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    pageOptions,
    // state,
    gotoPage,
    pageCount,
    prepareRow,
    flatRows,
  } = useTable(
    {
      columns,
      data,
      // defaultColumn
    },
    tableHooks,
    // useFilters,
    useSortBy,
    usePagination
  );

Answer 1

只需将箭头函数切换到命名函数

{
    accessor: "status",
    Header: "Status",
    Cell: function statusItems({ row }) {
      return (
        <h6
            className={classes.editstatus}
            onClick={() => bookingDetailHandler(row.original.brewery_type)}
            value={row.original.brewery_type}
          >
            {row.original.brewery_type}
          </h6>
      );
    },
  }