react-table在使用table钩子之前检查数据的存在。

Question

我是一个新手，其实我是想把蹩脚的 react-bootstrap-table2 重写成 react-table。

我用axios获取数据，然后在我的react-table组件中用useSelect获取数据，然后我在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放在if条件中，因为它是钩子。我不能把useTable放在if条件中，因为它是钩子。我如何检查我的数据是否存在？ react-table给了我TypeError.Cannot读取未定义的'forEach'属性。无法读取未定义的'forEach'属性。

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

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

Answer 1

我刚刚遇到了这个完全相同的问题，试图用状态存储数据。通过查看控制台日志错误，我注意到未定义的错误是指一个名为 data 在插件中。

由于您将该变量名改为 testsData，插件找不到它要找的东西。我意识到，我需要在一个页面上有多个表，所以只需使用 data 对我来说是不合适的。当研究API (https:/github.comtannerlinsleyreact-tableblobmasterdocsapiuseTable.md。)我发现，你可以通过在关键的 data 的数据，但您需要将该值设置为您的 testsData 在同一行的var上，应该可以清除你的错误。

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