时间戳

首页 > 解决方案 > 如何将 react-table 与自己​​的数据一起使用？

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

问题描述

我正在使用 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 项目时，它里面有正确的数据。

标签： arraysreactjsreact-hooksmemoizationreact-table

解决方案

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

推荐阅读