在 useTable 钩子之前 react-table 检查数据是否存在答案

【问题标题】：react-table check data presence before useTable hook在 useTable 钩子之前 react-table 检查数据是否存在
【发布时间】：2020-04-17 07:57:47
【问题描述】：

我是 react-table 的新手，实际上我正在尝试将糟糕的 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 放入。如何检查我的数据是否存在？ react-table 给我 TypeError: Cannot read property 'forEach' of undefined

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

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

【问题讨论】：

在你的代码中给testData一个默认值。它是否存储在某个状态？
@Drew Reese 嗯，不知何故收到了减号。它处于还原状态。好的，根据你我做了 let testsData = []; testsData = useSelector(state => state.fetchTestsData.testsData); - 没有运气，它仍然声称它是未定义的。不过，这是可以预见的。为什么要减去？
目前尚不清楚问题的原因。您的问题需要更多详细信息和上下文。 Minimal, Complete, and Reproducible 示例在更快地解决问题方面大有帮助。有关testsData 来自何处以及在到达useTable 的过程中与它有什么联系的信息。
@Drew Reese 很明显。我正在使用 axios .get('http:/url/') .then(response => { dispatch(fetchTestsData(response.data)); }); 检索数据}, []);然后我从 redux testsData = useSelector(state => state.fetchTestsData.testsData);就这样。没有奇迹。问题是我如何检查数据是否存在，肯定应该有某种方法来使用 react-table
response.data 在您调度以将其存储在状态时是否已在其中定义表数据？在此之前，reducer 中state.fetchTestsData.testsData 的初始状态值是多少。 axios 请求何时填充状态？当我说给testsData 一个初始值时，我的意思是你可以提供它作为它的来源，可以是状态中的默认值，也可以是选择器中的后备值。

标签： javascript reactjs react-table

【解决方案1】：

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

由于您将该变量名称更改为testsData，插件无法找到它要查找的内容。我意识到我需要在一页上放置多个表格，因此仅使用 data 不会为我解决问题。在研究 API (https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md) 时，我发现您可以将密钥 data 传递给数据，但您需要将该值设置为同一行上的 testsData var，这样可以清除您的错误：

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

【讨论】：