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

Question

我对react-table是个新手，实际上我正试着把糟糕的react-bootstrap-table2重写成react-table。

我使用axios获取数据，然后在我的反应表组件中检索，然后在useTable钩子中使用useSelect.Then，但是

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条件下，因为它是钩子。如何检查我的数据是否存在？react-table给我TypeError:无法读取未定义的属性'forEach‘

附言:我更新了上面的代码片段。它仍然会给我一个错误。

即使我声明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});