Mantine React table 遇到两个孩子有相同的键错误

Question

我正在尝试找到解决方案来修复使用 mantine 反应表时发生的此错误。当我尝试以开玩笑的方式运行测试用例时，我遇到了同样的错误。

警告：遇到两个孩子使用同一把钥匙，

0_attributes() => row.getValue(columnId)

。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一的键可能会导致子项重复和/或省略 - 该行为不受支持，并且可能会在未来版本中更改。

export const CreatorLookupsTable = ({
  isLoading,
  tableData,
  error,
  limit,
  addCreator,
}: Props) => {
  const data = tableData.data;

  const ErrorOrNoResult = () => {
    return limit
      ? ''
      : error
      ? 'Search results will be shown here.'
      : Object.keys(data).length === 0
      ? 'No creators found. Check username spelling and/or platform chosen.'
      : 'No creators found.';
  };

  const columns = [
    {
      accessorKey: 'attributes.method',
      header: 'Source',
      enableSorting: true,
      Cell: ({ cell, rowIndex }: any) => (
        <p
          key={`source-${cell.getValue()}-${rowIndex}`}
          style={{
            color: '#5E5ADB',
            margin: '0px',
            textTransform: 'capitalize',
          }}
        >
          {cell.getValue()}
        </p>
      ),
    },
    {
      accessorKey: 'attributes',
      header: 'Creators',
      enableSorting: true,
      Cell: ({ renderedCellValue, cell, rowIndex }: any) => (
        <Box
          key={`creators-${cell.getValue()}-${rowIndex}`}
          sx={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <Avatar
            src={renderedCellValue[renderedCellValue.method]?.logo}
            size={20}
            radius={100}
            sx={{
              marginRight: '5px',
            }}
          />
          <p>{renderedCellValue[renderedCellValue.method]?.displayName}</p>
        </Box>
      ),
    },
    {
      accessorKey: 'attributes',
      header: 'Reach',
      enableSorting: true,
      Cell: ({ renderedCellValue, cell, rowIndex }: any) => (
        <span
          key={`reach-${cell.getValue()}-${rowIndex}`}
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            width: '50px',
            backgroundColor: '#F4F4F5',
            borderRadius: '16px',
            padding: '2px 8px ',
            fontWeight: 400,
          }}
        >
          {formatLargeNumber(
            renderedCellValue[renderedCellValue.method]?.statistics.views
          )}
        </span>
      ),
    },
    {
      accessorKey: 'videos',
      header: 'Videos',
      enableSorting: true, // disable sorting for this column
      Cell: ({ cell, rowIndex }: any) => (
        <span
          key={`videos-${cell.getValue()}-${rowIndex}`}
          style={{
            color: '#3538CD',
            display: 'flex',
            justifyContent: 'center',
            width: '50px',
            alignItems: 'center',
            padding: '2px 8px ',
            backgroundColor: '#EEF4FF',
            borderRadius: '16px',
            fontWeight: 400,
          }}
        >
          {formatLargeNumber(cell.getValue() as number)}
        </span>
      ),
    },
    {
      id: 'button',
      header: '',
      enableSorting: false,
      Cell: ({ cell, rowIndex }: any) => (
        <Button
          key={`add-${cell.getValue()}-${rowIndex}`}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '40px',
            height: '16px',
            backgroundColor: '#6FCF97',
            fontSize: '8px',
            textTransform: 'uppercase',
            fontFamily: 'Alegreya Sans',
            fontWeight: 700,
          }}
          // onClick={() => addCreator()}
        >
          add
        </Button>
      ),
    },
  ];

  const table = useMantineReactTable({
    columns,
    data,
    enableSorting: true,
    enableColumnActions: false,
    enableColumnFilters: false,
    enablePagination: false,
    enableFullScreenToggle: false,
    enableDensityToggle: false,
    enableHiding: false,
    enableGlobalFilter: false,
    state: {
      isLoading: isLoading,
    },
    mantinePaperProps: {
      sx: (theme) => ({
        border: '0px solid !important',
      }),
    },
    mantineTableHeadCellProps: {
      sx: {
        fontFamily: '__Alegreya_Sans_d501ea',
        fontSize: '14px',
        fontStyle: 'normal',
        fontWeight: 400,
        lineHeight: '20px',
        textTransform: 'uppercase',
        padding: '0px 10px !important',
      },
    },
    mantineTableBodyCellProps: {
      sx: {
        padding: '0px 10px !important',
        fontFamily: '__Alegreya_Sans_d501ea',
      },
    },
    localization: {
      noRecordsToDisplay: ErrorOrNoResult(),
    },
  });

  return (
    <div data-testid={'creator-table-test-id'}>
      <MantineReactTable table={table} />
    </div>
  );
};

我尝试将索引添加到每列中，如下所示

key={

add-${cell.getValue()}-${rowIndex}

}

并且每列都有自己唯一的字符串值，但我不确定是否我正确地实施了它。如果我错了请纠正我

Answer 1

发生这种情况是因为您定义了具有相同

accessorKey

的多个列。

在 MRT v6 中，您可以通过为列定义提供唯一的

id

来解决此问题，例如

{
  accessorKey: 'attributes'
  id: 'reach',
}, {
  accessorKey: 'attributes'
  id: 'creators', // tip: this line is actually unnecessary
}