使用TanStack React Table v8报错：Cannot read properties of undefined (reading 'length')

以下是导致错误的核心问题及对应修复方案：

1. 初始数据状态未正确初始化 #

父组件中defaultData初始值设为null，接口请求完成前传给子组件的data是null，但TanStack React Table要求数据必须是数组类型，这会导致表格无法正常初始化。

修复：将初始状态改为空数组

const [defaultData, setDefaultData] = useState([]) // 替换null为[]

2. useReactTable配置参数错误 #

useReactTable的配置项中，数据字段的正确键名是data，而非你写的dataTable，这会导致表格无法读取到数据，进而调用getRowModel()时触发空值错误。

修复：修正配置参数名

const table = useReactTable({
  data: dataTable, // 替换dataTable为data
  columns,
  getCoreRowModel: getCoreRowModel(),
});

3. 列定义的accessorKey拼写错误&字段不匹配 #

父组件的列配置存在多处拼写错误，同时字段名与接口返回不匹配：

• assecorKey/accesorKey → 正确拼写为accessorKey
• userID → 接口返回字段为userId（小写d），需保持一致

修复：修正列定义

const columns = [
  {
    id: 1,
    label: 'user ID',
    accessorKey: 'userId'
  },
  {
    id: 2,
    label: 'id',
    accessorKey: 'id'
  },
  {
    id: 3,
    label: 'body',
    accessorKey: 'body'
  },
  {
    id: 4,
    label: 'title',
    accessorKey: 'title'
  },
]

4. useMemo使用不规范 #

子组件中useMemo缺少依赖数组，无法正确缓存数据，可能导致不必要的重渲染或数据异常。

修复：添加依赖数组

const dataTable = useMemo(() => data, [data]); // 添加[data]依赖

完整修正后的代码 #

父组件（Vendor.js） #

'use client'
import React, { useEffect, useState } from 'react'
import BasicTable from '../components/BasicTable'
import axios from 'axios';

export default function Vendor() {
  const [defaultData, setDefaultData] = useState([])

  useEffect(() => {
    const generateData = async() => {
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then((response) => setDefaultData(response.data))
    }
    generateData()
  }, [])

  const columns = [
    {
      id: 1,
      label: 'user ID',
      accessorKey: 'userId'
    },
    {
      id: 2,
      label: 'id',
      accessorKey: 'id'
    },
    {
      id: 3,
      label: 'body',
      accessorKey: 'body'
    },
    {
      id: 4,
      label: 'title',
      accessorKey: 'title'
    },
  ]
  return (
    <div>
      <h1>Vendor</h1>
      <BasicTable data={defaultData} columns={columns}/>
    </div>
  )
}

子组件（BasicTable.js） #

import React from "react";
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
} from "@tanstack/react-table";
import { useMemo } from "react";

export default function BasicTable({ data, columns }) {
  const dataTable = useMemo(() => data, [data]);
  const table = useReactTable({
    data: dataTable,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <div>
      Basic table
      <div className="border-solid border-2 rounded mt-5">
        <table>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>
                  {flexRender(
                    header.column.columnDef.label,
                    header.getContext()
                  )}
                </th>
              ))}
            </tr>
          ))}
          <tbody>
            {table.getRowModel().rows.map(row => (
                <tr key={row.id}>
                    {row.getVisibleCells().map(cell => (
                        <td key={cell.id}>
                            {flexRender(cell.column.columnDef.cell || cell.getValue(), cell.getContext())}
                        </td>
                    ))}
                </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Denyyel