Компонент таблицы TanStack (LibraryTable) не выполняет повторную визуализацию и не меняет пользовательский интерфейс при ⇐ Javascript

[Anonymous]

Я создаю страницу «Библиотека» в приложении Next.js/React, используя TanStack Table v8 (

Код: Выделить всё

@tanstack/react-table

).
Моя архитектура соответствует шаблону Feature-Sliced ​​Design (FSD):

• Код: Выделить всё

  LibraryProvider

  [/b]: контекст React, который хранит все состояние с помощью специального перехватчика useLibrary. Это обеспечивает viewMode,visibleBeats (массив данных), сортировку, setSorting, rowSelection и setRowSelection.

• Код: Выделить всё

  LibraryContent

  (умный компонент):[/b] Этот компонент использует useLibrary(). Он отвечает за создание экземпляра таблицы с помощью useReactTable().

• Код: Выделить всё

  LibraryTable

  и LibraryGrid (немые компоненты):[/b] Это два разных режима просмотра.

Мой компонент LibraryContent выглядит следующим образом:

Код: Выделить всё

"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" ?
 :

}



)
}

И моя LibraryTable (тот, который не работает) — это простой «тупой» компонент:

Код: Выделить всё

"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."
}


)
}



)
}

Проблема
Когда я нахожусь в Просмотре списка (

Код: Выделить всё

LibraryTable

) и я щелкаю флажок ИЛИ заголовок сортируемого столбца:

• OnRowSelectionChange (или onSortingChange) срабатывает правильно.
• Компонент LibraryContent выполняет повторную визуализацию (я подтвердил это с помощью журналов).

• Код: Выделить всё

  useReactTable

  вызывается снова с новым состоянием сортировки или rowSelection.
• Пользовательский интерфейс LibraryTable не обновляется. data-state="selected" не применяется, и порядок столбцов не изменяется.

Когда я нахожусь в представлении сетки (

Код: Выделить всё

LibraryGrid

):

• Код: Выделить всё

  LibraryGrid

  получает table.getRowModel().rows в качестве реквизита.
• Когда я меняю состояние сортировки (через отдельный DropdownMenu), состояние обновляется, LibraryContent перерисовывается, а table.getRowModel().rows представляет собой новый отсортированный массив.

• Код: Выделить всё

  GridView

  выполняет повторную визуализацию и работает отлично.

Переключение «Исправление»: Если я выбираю строку (она не обновляется) или сортирую столбец (он не обновляется) в «Просмотре списка», затем перехожу в «Просмотр сетки» (который отображает изменения правильно), а затем переключаюсь назад в «Просмотр списка», Компонент LibraryTable перемонтируется, а затем правильно отображает отсортированное и выбранное состояние.
Мой вопрос
Какова лучшая практика для этой архитектуры? Является ли передача полного объекта table в качестве реквизита фундаментально ошибочной, или мне не хватает способа сделать мой LibraryTable реагирующим на изменения внутреннего состояния объекта table (например, сортировку и rowSelection)?

Подробнее здесь: https://stackoverflow.com/questions/798 ... i-on-rowse