reactjs - Použití react-table, přístup k datům vnořeným v objektu

Vytvářím tabulku pomocí react-table a Typescriptu. Nyní mám určité potíže s přístupem k datům, která dostávám zpět z mého API. Používám jen Google Books API. Nyní jsem vytvořil komponentu tabulky, která přijímá nějaká data, což je pole objektů. Tyto objekty nyní obsahují vnořená data, která jsem definoval v rozhraní Books, ve kterém zahrnuji pouze data, která potřebuji z odpovědi API.

Níže je mé rozhraní Book:

export interface Book {
  id: number;
  isbn: {
    volumeInfo: {
      industryIdentifiers: {
        type: string;
        identifier: string;
      }[];
    };
  };
  title: {
    volumeInfo: {
      title: string;
    };
  };
  authors: {
    volumeInfo: {
      authors: string[];
    };
  };
  publishedDate: {
    volumeInfo: {
      publishedDate: string[];
    };
  };
}

Vytvořil jsem pole, kde jsem definoval své sloupce pomocí dokumentace z react-table:

import { Book } from "./home.types";

const columnHelper = createColumnHelper<Book>();

const columns = [
  columnHelper.accessor("id", {
    header: () => "ID",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("isbn", {
    header: () => "ISBN",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("title", {
    header: () => "Title",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("authors", {
    header: () => "Authors",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("publishedDate", {
    header: () => "Date of publication",
    cell: (info) => info.getValue(),
  }),
];

Problém, který zažívám, je ten, že data se načítají do tabulky, ale všechna ostatní data ne, a opravdu nechápu proč. Ukazuji na umístění dat v odpovědi, kterou předávám své tabulce.

Myslím, že to prostě nevidím jasně, může mi někdo ukázat správný směr?

Odpověď č. 1

Pokud říkáte, že nemůžete získat přístup k hodnotám v zanořených objektech (tzn. chcete zobrazit hodnotu title.volumeInfo.title), udělali byste něco podobného níže. Z vašeho příkladu jednoduše poskytujete React Table objekt a nebude vědět, jak ho chcete zobrazit.

const columns = [
  columnHelper.accessor("title.volumeInfo.title", {
    header: () => "Title",
    cell: (info) => info.getValue(),
  })
 // other columns here...
];

Ber to ale s rezervou, já nepoužívám přístup columnHelper a jednoduše používám statickou konfiguraci sloupců. Na základě toho, co jsi poskytl, to pravděpodobně můžeš také použít. Dělá to kód mnohem udržitelnější/čitelnější a vyhýbá se všem zbytečným callbackům.

const columns = useMemo(
  () => [
    {
      header: 'Title',
      accessorKey: 'title.volumneInfo.title'
    },
    // other columns here...
  ],
  [] // put any updater dependencies in the second array if you need
);

Odpověď č. 2

Tuto metodu můžete sledovat, pokud chcete. I když titulek říká v7, odpověděl(a) jsem pro v8

Renderování výsledků React Table [v7] se zobrazí jako [object Object]