Die TanStack-Tabellenkomponente (LibraryTable) rendert und ändert die Benutzeroberfläche bei rowSelection nicht neu und ⇐ JavaScript

[Anonymous]

Ich erstelle eine „Bibliothek“-Seite in einer Next.js/React-App mit TanStack Table v8 (

Code: Select all

@tanstack/react-table

).
Meine Architektur folgt dem Feature-Sliced ​​Design (FSD)-Muster:

• Code: Select all

  LibraryProvider

  [/b]: Ein Reaktionskontext, der den gesamten Status mithilfe eines benutzerdefinierten useLibrary-Hooks speichert. Dies stellt viewMode, sichtbareBeats (das Datenarray), Sortierung, setSorting, rowSelection und setRowSelection bereit.

• Code: Select all

  LibraryContent

  (Smart Component):[/b] Diese Komponente verbraucht useLibrary(). Es ist für die Erstellung der Tabelleninstanz mit useReactTable() verantwortlich.

• Code: Select all

  LibraryTable

  & LibraryGrid (Dumme Komponenten):[/b] Dies sind die beiden verschiedenen Ansichtsmodi.

Meine LibraryContent-Komponente sieht so aus:

Code: Select all

"use client"

import LibraryToolbar from "@/features/library/components/LibraryToolbar"
import {
LibraryProvider,
useLibrary
} from "@/features/library/contexts/LibraryContext"
import LibraryBatchActionsBar from
"@/features/library/components/LibraryBatchActionsBar"
import LibraryTable from "@/features/library/components/LibraryTable"
import { columns } from "@/features/library/components/columns"
import {
getCoreRowModel,
getSortedRowModel,
useReactTable
} from "@tanstack/react-table"
import LibraryGrid from "@/features/library/components/LibraryGrid"

export default function LibraryPage() {
return (
[*]




)
}

function LibraryContent() {
const {
viewMode,
visibleBeats,
setSorting,
setRowSelection,
sorting,
rowSelection
} = useLibrary()

const table = useReactTable({
data: visibleBeats,
columns: columns,
getCoreRowModel: getCoreRowModel(),
onSortingChange: setSorting,
onRowSelectionChange: setRowSelection,
getSortedRowModel: getSortedRowModel(),
state: {
sorting,
rowSelection,
}
})

return (





{viewMode === "list" ?
 :

}



)
}

Und meine LibraryTable (diejenige, die ausfällt) ist eine einfache „dumme“ Komponente:

Code: Select all

"use client"

import {
Table as TableUI,
TableBody,
TableCell,
TableHeader,
TableRow,
TableHead
} from "@/shared/ui/table"
import { flexRender, Table } from "@tanstack/react-table"
import { useLibrary } from "../contexts/LibraryContext"
import { LoaderCircle } from "lucide-react"

export default function LibraryTable({ table }: { table: Table }) {
const { isLoading } = useLibrary()

const rowClass = "border-border cursor-pointer transition-all duration-200 hover:bg-gray-100"

return (



{table.getHeaderGroups().map((headerGroup) => (

{headerGroup.headers.map((header) => {
return (

{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)
}

)
})}

))}


{table.getRowModel().rows?.length
? (
table.getRowModel().rows.map((row) => (

{row.getVisibleCells().map((cell) =>  (

{flexRender(cell.column.columnDef.cell, cell.getContext())}

))}

))
) : (


{isLoading
?  : "No beats yet."
}


)
}



)
}

Das Problem
Wenn ich mich in der Listenansicht befinde (

Code: Select all

LibraryTable

) und ich klicke auf ein Kontrollkästchen ODER eine sortierbare Spaltenüberschrift:

• Die onRowSelectionChange (oder onSortingChange) wird korrekt ausgelöst.
• Die LibraryContent-Komponente wird erneut gerendert (ich habe dies mit Protokollen bestätigt).

• Code: Select all

  useReactTable

  wird erneut mit dem neuen Sortierstatus oder rowSelection aufgerufen.
• Die LibraryTable-Benutzeroberfläche wird nicht aktualisiert. Der data-state="selected" wird nicht angewendet und die Spaltenreihenfolge ändert sich nicht.

Wenn ich mich in der Rasteransicht befinde (

Code: Select all

LibraryGrid

):

• Code: Select all

  LibraryGrid

  empfängt table.getRowModel().rows als Requisite.
• Wenn ich den Sortierstatus ändere (über ein separates Dropdown-Menü), wird der Status aktualisiert, LibraryContent wird neu gerendert und table.getRowModel().rows ist ein neues, sortiertes Array.

• Code: Select all

  GridView

  wird neu gerendert und funktioniert perfekt.

Der umschaltbare „Fix“: Wenn ich in der „Listenansicht“ eine Zeile auswähle (sie wird nicht aktualisiert) oder eine Spalte sortiere (sie wird nicht aktualisiert), schalte ich dann auf „Rasteransicht“ um (die die Änderungen korrekt anzeigt) und schalte dann zurück auf „Liste“. View“ wird die LibraryTable-Komponente erneut gemountet und dann korrekt den sortierten und ausgewählten Status anzeigen.
Meine Frage
Was ist die Best Practice für diese Architektur? Ist die Übergabe des vollständigen Tabellenobjekts als Requisite grundsätzlich fehlerhaft oder fehlt mir eine Möglichkeit, meine LibraryTable auf die internen Statusänderungen des Tabellenobjekts reagieren zu lassen (wie Sortierung und Zeilenauswahl)?