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

Question

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

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,
}

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

标签： reactjstypescriptreact-table-v7

Answer 1

你useMemo缺乏打字

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