React-Table：不可分配给类型 Partial<TableState<object>>

Posted 2023-02-19

【中文标题】React-Table：不可分配给类型 Partial<TableState<object>>

【英文标题】：React-Table: not assignable to type Partial<TableState<object>>

【发布时间】：2020-05-17 06:52:33

【问题描述】：

我尝试将 "react-table": "^7.0.0-rc.15" 与 React + Typescript 一起使用。我从沙盒https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination 得到分页示例 我尝试运行它。但在下面这一点

function Table( columns, data : any) 
// Use the state and functions returned from useTable to build your UI


const 
   getTableProps,
   getTableBodyProps,
   headerGroups,
   prepareRow,
   page, // Instead of using 'rows', we'll use page,
   // which has only the rows for the active page

   // The rest of these things are super handy, too ;)
   canPreviousPage,
   canNextPage,
   pageOptions,
   pageCount,
   gotoPage,
   nextPage,
   previousPage,
   setPageSize,
   state:  pageIndex, pageSize ,
   = useTable(
  
     columns,
     data,
     initialState:  pageIndex: 2 ,
  ,
  usePagination
)

我收到错误

Type ' pageIndex: number; ' is not assignable to type 'Partial<TableState<object>>'.
Object literal may only specify known properties, and 'pageIndex' does not exist in type     'Partial<TableState<object>>'.  TS2322

 102 |       columns,
 103 |       data,
 104 |       initialState:  pageIndex: 2 ,
     |                       ^
 105 |     ,
 106 |     usePagination
 107 |   )

pageindex : 2 的类型有问题。 有什么帮助吗？

【问题讨论】：

检查这个问题：github.com/tannerlinsley/react-table/issues/1878

这就是解决方案。

您好，您能详细说明一下解决方案吗？此链接指向一个非常完整的示例，我无法正确处理

【参考方案1】：

创建文件react-table-config.d.ts

复制此处发布的文件示例https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-table/Readme.md

react-table-config.d.ts

import 
  UseColumnOrderInstanceProps,
  UseColumnOrderState,
  UseExpandedHooks,
  UseExpandedInstanceProps,
  UseExpandedOptions,
  UseExpandedRowProps,
  UseExpandedState,
  UseFiltersColumnOptions,
  UseFiltersColumnProps,
  UseFiltersInstanceProps,
  UseFiltersOptions,
  UseFiltersState,
  UseGlobalFiltersColumnOptions,
  UseGlobalFiltersInstanceProps,
  UseGlobalFiltersOptions,
  UseGlobalFiltersState,
  UseGroupByCellProps,
  UseGroupByColumnOptions,
  UseGroupByColumnProps,
  UseGroupByHooks,
  UseGroupByInstanceProps,
  UseGroupByOptions,
  UseGroupByRowProps,
  UseGroupByState,
  UsePaginationInstanceProps,
  UsePaginationOptions,
  UsePaginationState,
  UseResizeColumnsColumnOptions,
  UseResizeColumnsColumnProps,
  UseResizeColumnsOptions,
  UseResizeColumnsState,
  UseRowSelectHooks,
  UseRowSelectInstanceProps,
  UseRowSelectOptions,
  UseRowSelectRowProps,
  UseRowSelectState,
  UseRowStateCellProps,
  UseRowStateInstanceProps,
  UseRowStateOptions,
  UseRowStateRowProps,
  UseRowStateState,
  UseSortByColumnOptions,
  UseSortByColumnProps,
  UseSortByHooks,
  UseSortByInstanceProps,
  UseSortByOptions,
  UseSortByState
 from 'react-table'

declare module 'react-table' 
  // take this file as-is, or comment out the sections that don't apply to your plugin configuration

  export interface TableOptions<D extends Record<string, unknown>>
    extends UseExpandedOptions<D>,
      UseFiltersOptions<D>,
      UseGlobalFiltersOptions<D>,
      UseGroupByOptions<D>,
      UsePaginationOptions<D>,
      UseResizeColumnsOptions<D>,
      UseRowSelectOptions<D>,
      UseRowStateOptions<D>,
      UseSortByOptions<D>,
      // note that having Record here allows you to add anything to the options, this matches the spirit of the
      // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
      // feature set, this is a safe default.
      Record<string, any> 

  export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseExpandedHooks<D>,
      UseGroupByHooks<D>,
      UseRowSelectHooks<D>,
      UseSortByHooks<D> 

  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseColumnOrderInstanceProps<D>,
      UseExpandedInstanceProps<D>,
      UseFiltersInstanceProps<D>,
      UseGlobalFiltersInstanceProps<D>,
      UseGroupByInstanceProps<D>,
      UsePaginationInstanceProps<D>,
      UseRowSelectInstanceProps<D>,
      UseRowStateInstanceProps<D>,
      UseSortByInstanceProps<D> 

  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseColumnOrderState<D>,
      UseExpandedState<D>,
      UseFiltersState<D>,
      UseGlobalFiltersState<D>,
      UseGroupByState<D>,
      UsePaginationState<D>,
      UseResizeColumnsState<D>,
      UseRowSelectState<D>,
      UseRowStateState<D>,
      UseSortByState<D> 

  export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseFiltersColumnOptions<D>,
      UseGlobalFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseResizeColumnsColumnOptions<D>,
      UseSortByColumnOptions<D> 

  export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseFiltersColumnProps<D>,
      UseGroupByColumnProps<D>,
      UseResizeColumnsColumnProps<D>,
      UseSortByColumnProps<D> 

  export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = any>
    extends UseGroupByCellProps<D>,
      UseRowStateCellProps<D> 

  export interface Row<D extends Record<string, unknown> = Record<string, unknown>>
    extends UseExpandedRowProps<D>,
      UseGroupByRowProps<D>,
      UseRowSelectRowProps<D>,
      UseRowStateRowProps<D> 

【讨论】：

欢迎来到 ***.com！您应该多解释一下要做什么，而不是仅仅链接到某个网站。有朝一日，来源可能会被删除，然后您的答案就会缺乏信息。