router.push onClick Row 使用 Tanstack / React-Table 和 Typescript (2339)

Question

当我单击表格行时，推送到新路线时出现 linting 错误。 它有效，但我如何定义它？ 它说“TData 类型的属性“id”不存在。”

//dataTable.tsx

...

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  )
  const table = useReactTable({
    data,
    columns,
    }
  })

  const router = useRouter()
  
  return (
...
        <Table>
          <TableHeader>
           ...
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                  onClick={() => 
                    router.push(`classes/${row.original.id}`)}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(cell.column.columnDef.cell, 
                       cell.getContext())}
                    </TableCell>
                  ))}
                </TableRow>
                ...

数据类型已定义，为什么我会收到错误？

// page.tsx
...
 
function getData(): Payment[] {
  // Fetch data from your API here.
  return [
    {
      id: "728ed52f",
      amount: 100,
      status: "pending",
      email: "[email protected]",
    },
    // ...
  ]
}

const ClassesPage = () => {
  const data = getData()


  return (
    <div className="container mx-auto py-10">
      <DataTable columns={columns} data={data} />
    </div>
  )
}

...

里面

//column.tsx

...
export type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
...

我只想使用单击的行中的 a 值路由到新路径。有没有更好的方法来实现这个目标？

Answer 1

根据我的观察，这似乎是您访问

.id

的问题，您可以尝试添加可选的链接运算符

(?.)

，例如。

row?.id

或

row?.original?.id

。如果 lint 错误仍然存在，请提供确切的行和更多信息，以便有助于有效调试。