petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.16k stars 299 forks source link

[Maybe BUG] Rendered html has `item="[object Object"` #991

Closed jonluca closed 11 months ago

jonluca commented 11 months ago

CleanShot 2023-10-09 at 17 15 27@2x

When rendering a virtualized list, the html has item="[object Object". I thought that setting the computeItemKey might fix this, but it doesn't.

This doesn't affect functionality - it works fine, just feels like there might be uneccesary work going on if we're calling .toString() on the item on every render.

  return (
    <Virtuoso
      increaseViewportBy={500}
      className={"scroll scroll-5"}
      style={{
        height: "100%",
        width: "100%",
        overflowX: "hidden",
      }}
      data={toRender}
      totalCount={count ?? undefined}
      itemContent={renderItem}
      initialItemCount={toRender.length}
      computeItemKey={(index) => {
        const model = toRender[index] || { id: Math.random() };
        return model.id;
      }}
      endReached={() => {
        loadMore();
      }}
      atBottomThreshold={THRESHHOLD_PIXELS_FETCH_MORE}
      atBottomStateChange={(atBottom) => {
        if (atBottom) {
          loadMore();
        }
      }}
    />
  );
jonluca commented 11 months ago

I think it's here - https://github.com/petyosi/react-virtuoso/blob/64b223c4b5c104cc4059c96ae0536d7fdcffa347/src/TableVirtuoso.tsx#L150