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

Question

我有以下使用react表挂钩的代码。Vercel编译显示以下错误消息：49:15错误：组件定义缺少显示名称react/显示名称，其中第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>
);
},
}