如何将 react-table 与自己的数据一起使用？答案

【问题标题】：How do I use react-table with own data?如何将 react-table 与自己的数据一起使用？
【发布时间】：2021-10-23 05:56:56
【问题描述】：

我正在使用 react-table 并遵循示例 https://react-table.tanstack.com/docs/examples/basic 一切都按预期工作。但是，当我尝试使用自己的数据时，我不断收到 TypeError: data is undefined in useTable。我的数组确实包含密钥 id，我可以在控制台中查看 items 数组。如果我使用示例中的预定义数组，它就可以正常工作

const [items, setItems] = useState(() =>{
    let init = new Array(0)
    for(let i = 0; i < 2; i++){
        init.push(collections[0].items[i])
    }
        
    return init;
})
    
const columns = React.useMemo(
    () => [
        {
            Header: 'ID',
            accessor: 'id',
        },
    ], [],
);
    
const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
} = useTable({ columns, items }, useSortBy);  <----- ERROR HERE

编辑：

我认为问题在于 items 数组已被记忆，但我该怎么做呢？

编辑 2：

所以也许这不是问题所在。我将我的 useState 更改为：

const [items, setItems] = useState(React.useMemo(() =>{
    let init = new Array(0)
    for(let i = 0; i < 2; i++){
        init.push(collections[0].items[i])
    }

    return init;
}, []))

但我仍然收到 TypeError: data is undefined。当我 console.log 项目时，它里面有正确的数据。

【问题讨论】：

您必须将data 传递给useTable 而不是items。 useTable({ columns, data: items }, useSortBy)

标签： arrays reactjs react-hooks memoization react-table

【解决方案1】：

我花了几个小时试图弄清楚这一点，但答案很蹩脚。该数组必须称为数据。我刚刚将项目重命名为数据，它就起作用了。

【讨论】：