取消选择较高组件中的所有行

Question

我正在为我的新网络应用程序使用 React Table v8。我有一个带有用于选择行的复选框的表。在组件树中较高的组件中，我正在对选定的行执行某些操作，然后我想清除所有选定的行。我在搜索时发现了函数toggleAllRowsSelected。我尝试将这个“useEffect”添加到我的表格组件中。

useEffect(() => {
        if (selectedRows.length === 0) {
            table.toggleAllRowsSelected(false);
        }
    }, [selectedRows]);

然后我将“selectedRows”从组件树中向上传递。 但这导致了连续运行循环。

我正在像这样创建我的 ReactTable：

const table = useReactTable({
        data,
        columns,
        state: {
            sorting,
            rowSelection,
            globalFilter,
            columnFilters
        },
        onSortingChange: setSorting,
        onRowSelectionChange: setRowSelection,
        onColumnFiltersChange: setColumnFilters,
        onGlobalFilterChange: setGlobalFilter,
        enableRowSelection: true,
        getCoreRowModel: getCoreRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getFilteredRowModel: getFilteredRowModel()
        // debugTable: true
    });

有人知道我如何才能正确实现这一目标吗？

基本上我只是想传递一个信号/触发器来从表本身上方的组件取消选择表中的所有行。

Answer 1

仅从这段代码中我无法看出为什么你有一个渲染循环。

但是您似乎有 2 个组件都跟踪 RowSelectionState：

• 较高的组件跟踪“selectedRows”
• 下部组件跟踪“rowSelection”

这似乎有问题。一个国家应该有单一的事实来源。

• 也许你可以消除“selectedRows”并传递“rowSelection”和“setRowSelection”
• 使用上下文使“rowSelection”和“setRowSelection”可用于反应表组件
• 使用“Jotai”之类的东西在 React 之外存储 rowSelection 状态