React Table - 属性“访问器”的类型不兼容答案

【问题标题】：React Table - types of property 'accessor' are incompatibleReact Table - 属性“访问器”的类型不兼容
【发布时间】：2020-12-07 13:22:17
【问题描述】：

我正在 create-react-app 项目（版本 ^7.0.25）中试用 react-table。我正在使用他们快速入门documentation 中的确切示例。但是，我在访问器和数据列之间出现类型错误。下面是我的代码，

import * as React from 'react';
import { Solution } from '../../../Models/SolutionModel';
import {useTable} from 'react-table'

interface ICompareTableComponentProps {
  Solutions : Solution[]
}

const CompareTableComponent: React.FunctionComponent<ICompareTableComponentProps> = (props) => {
    
    const data = React.useMemo(
      () => [
        {
          col1: 'Hello',
          col2: 'World',
        },
        {
          col1: 'react-table',
          col2: 'rocks',
        },
        {
          col1: 'whatever',
          col2: 'you want',
        },
      ],
      []
    )
  
    const columns = React.useMemo(
      () => [
        {
          Header: 'Column 1',
          accessor: 'col1', // accessor is the "key" in the data
        },
        {
          Header: 'Column 2',
          accessor: 'col2',
        },
      ],
      []
    )
  
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
    } = useTable({ columns, data })
  
    return (
      <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th
                  {...column.getHeaderProps()}
                  style={{
                    borderBottom: 'solid 3px red',
                    background: 'aliceblue',
                    color: 'black',
                    fontWeight: 'bold',
                  }}
                >
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <td
                      {...cell.getCellProps()}
                      style={{
                        padding: '10px',
                        border: 'solid 1px gray',
                        background: 'papayawhip',
                      }}
                    >
                      {cell.render('Cell')}
                    </td>
                  )
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
    )
          
};
export default CompareTableComponent;

以下是我的完整错误，

Type '{ Header: string; accessor: string; }[]' is not assignable to type 'Column<{ col1: string; col2: string; }>[]'.
  Type '{ Header: string; accessor: string; }' is not assignable to type 'Column<{ col1: string; col2: string; }>'.
    Type '{ Header: string; accessor: string; }' is not assignable to type 'ColumnInterface<{ col1: string; col2: string; }> & { accessor: "col2"; } & ColumnInterfaceBasedOnValue<{ col1: string; col2: string; }, string>'.
      Type '{ Header: string; accessor: string; }' is not assignable to type '{ accessor: "col2"; }'.
        Types of property 'accessor' are incompatible.
          Type 'string' is not assignable to type '"col2"'.  TS2322

我尝试将列转换为对象，但没有成功。

{
    col1: 'react-table' as any,
    col2: 'rocks' as any,
}

我确信我忽略了一些非常微不足道的事情，但似乎无法找到问题所在。对此的任何帮助将不胜感激。

【问题讨论】：

您找到解决此问题的方法了吗？
不确定这是否是这里的问题，但是当使用字符串列访问器时，您应该将as const 放在末尾：accessor: 'col1' -> accessor: 'col1' as const

标签： reactjs typescript react-table-v7

【解决方案1】：

您的 useMemo 缺少输入

const columns = useMemo<Column<{col1: string}>[]>(() => [
  {
    col1: 'hello world',
  },
], [])

【讨论】：

不，这不能解决问题。 Type '{ col1: string; }' is not assignable to type 'Column<{ col1: string; }>'. Object literal may only specify known properties, and 'col1' does not exist in type 'Column<{ col1: string; }>'.
@ElioBriceño 您需要将备忘录键入为 array 列：useMemo<Column<{col1: string}>[ ]>

【解决方案2】：

在此处查看此主题：https://github.com/ggascoigne/react-table-example/issues/3

基本上你需要定义：

const columns: Array<Column<{ col1: string; col2: string }>> = useMemo(

.. 或为数据行使用接口：

const columns: Array<Column<DataInterface>> = ...

【讨论】：

interface Data { name: string } const column: Column<Data> = { accessor: 'name' } 不应该这样吗？ TS2322：类型 '"name"' 不可分配给类型 'Accessor | (访问器 & "名称") |未定义'。