react-table 在 useTable 钩子之前检查数据存在

Question

我是 react-table 的新手，实际上我正在尝试将糟糕的 react-bootstrap-table2 重写为 react-table.

我正在使用 axios 获取数据，然后在我的 react-table 组件中我正在检索然后使用 useSelect.Then 我在 useTable 挂钩中使用它们，但是

import React from "react";
import {useSelector} from "react-redux";
import {useTable} from "react-table";

function Table() {

let testsData = useSelector(state => 
state.fetchTestsData.testsData);
console.log("testData to show in table ", testsData);
testsData = !(testsData === null || testsData.length === 0) ?  [];


const columns = React.useMemo(
    () => [
        {
            Header: '1',
            accessor: '1column',
        },
        {
            Header: '2',
            accessor: '2column',
        },
    ],
    []
);

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
} = useTable({columns, testsData});


const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
} = useTable({columns, testsData});

有一段时间，没有数据。如果条件导致它挂钩，我不能将 useTable 放入。如何检查我的数据是否存在？ react-table 给我 TypeError: Cannot read 属性 'forEach' of undefined

p.s 我更新了上面的代码片段。它仍然给我一个错误。

即使我声明 testsData = [];并将其传递给 useTable- 它给出了一个错误

Answer 1

我只是运行遇到了同样的问题，试图将数据与状态一起存储。查看控制台日志错误，我注意到未定义的错误指的是插件中名为 data 的变量。

由于您将该变量名称更改为 testsData，该插件无法找到它要查找的内容。我意识到我需要在一个页面上放置多个表格，所以仅使用 data 对我来说是不够的。在研究 API (https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md) 时，我发现您可以传入密钥 data 作为数据，但您需要将该值设置为您的 testsData 变量行，这应该可以清除您的错误：

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
} = useTable({columns, data: testsData});

react-table 在 useTable 钩子之前检查数据存在

react-table check data presence before useTable hook

javascript

reactjs

react-table