问题标签 [react-table-v7]

我正在开发一个以表格格式显示数据的反应应用程序。我正在使用 react-table 来格式化数据。我想让其中一个单元格成为项目描述页面的链接。我不希望整行都是“可点击的”。我正在从后端服务器检索数据以填充行。下面是我的反应代码的副本：

这是它们映射的列。

When my react application loads the data in my table rows does not show on the screen. It appears only if I run a 'console.log' in the codebase. If I refresh the screen the data in the table rows will disappear and will not appear again until I run another console.log separate from the original console log. Here is my code:

I am using Redux. Here is my action that is fired when the page loads:

and my reducer

我有一个用于 groupBy 的外部过滤器，并且在更改它的值时，我需要根据所选选项对行进行分组。

我有日期、用户、名称等选项，需要根据所选选项对行进行分组。我浏览了为分组提供的示例，尽管它是在单击列时触发的，而我希望在该过滤器值更改时进行分组。

将不胜感激的建议。

已尝试以编程方式对列日期进行分组。虽然我得到“超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 内重复调用 setState 时可能会发生这种情况”

我正在创建一个表格，一旦您单击一行，就会打开一个弹出模式，允许您更新该行的内容。模态的关闭顺序会更新更改的firestore，并激活一个道具功能，该功能将更改更新到上述组件中。

关闭模态不会更新表格（我开始意识到它根本不会导致组件重新渲染......）

成分：

父亲上桌：

表格组件：

模态组件：

提前感谢您的帮助，我希望这可以完成......在这个问题上 2 周！

更新：截至目前，我尝试过（没有成功）：

1. 将 useMemo 钩子从数据常量中删除到表中，使其更频繁地重新呈现，但似乎并没有削减它。
2. 将 props 中的数据作为新数组传递，并将旧数组传播到其中。

我正在使用 react-table v7，我遇到了一个问题，当我更改一个单元格的数据时，整个表格会重新呈现。我有数千行，所以每次重新渲染都很慢。

我的 react-table 调用一个表单，用户可以填写该表单以从特定行中删除一个项目：该表单调用一个 API 来更改后端中的数据。

我希望能够重新渲染包含我正在编辑的文章的关联位置的单元格，以反映我已从该单元格中删除了一个位置。

会成为：

这样我只会重新渲染右上角的单元格。

简化代码：

应用程序.js：

App.js 调用 Table.js：

表.js：

Table.js 有一个 DeleteForm，我用它来调用一个从文章中删除选定位置的 API：

DeleteForm.js：

我一直在研究 Stack Overflow，我能找到的最接近的问题是：

• react-table 在 select 上重新渲染整个表：没有帮助，因为我不想将我的 react-table 降级到 v6
• select row on click react-table：找到了关于在 react-table 中选择特定行的信息，但不确定如何将其应用于重新渲染选定的行
• react-table 不断重新渲染未更改的单元格：未回答

有些地方说虚拟化或分页可能会有所帮助，但我确实想首先呈现表中的所有内容，因为我有一个搜索功能来查找数据并且我希望所有数据都可用。

我知道这在 StackOverflow 上已被问过几次，但我之前的任何答案都没有为我工作。我正在寻找一个react-table组件，并允许用户下载当前呈现为 CSV 的过滤数据。我知道我react-csv以后需要使用，但现在我什至很难访问表中的数据。

我遇到的问题是如何正确引用 react-table 组件，因为它是一个功能组件。我总是收到控制台警告：

函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

这是使用类似于此答案的实现。我也试过这个答案中的方法。

我的代码如下所示：我正在对表格使用条件渲染，返回表格的函数是：

this.reactTable目前是reactTable = React.createRef();在我的课堂上创建的。我也试过

现在我只想能够控制台记录数据，以便我知道我可以访问它，我正在使用console.log(this.selectTable.getResolvedState().sortedData).

这些都不起作用 - 有人可以帮忙吗？

我正在 create-react-app 项目（版本^7.0.25）中尝试 react-table。我正在使用他们快速入门文档中的确切示例。但是，我在访问器和数据列之间出现类型错误。下面是我的代码，

以下是我的完整错误，

我尝试将列转换为对象，但没有运气。

我确信我忽略了一些非常微不足道的事情，但似乎找不到问题。对此的任何帮助将不胜感激。

我正在将 react table v7 用于项目（table-columns）。其中一列 ( 'activated') 是布尔值，在更改时，它会调用不同的组件，这将更改布尔值。新的布尔值通过回调设置为：

我遇到的问题是，这样做this.setState({data: [...new_data]});会重新加载整个表并将其设置为排序和过滤值。这意味着，例如，如果我的过滤是显示所有已激活的 = ✅，然后我将其中一项从 ✅ 更改为 ❌，则更改完成后，表格将重新加载并继续仅显示带有 ✅ 的对象，因此更改项目从视图中消失了。但是，我想停止重新加载，并保留当前视图，即使它与默认排序和过滤不匹配。

我找到的部分解决方案是将回调设置状态的方式更改为this.setState({data: new_data});. 这样，排序和过滤不会重新加载，并保持表格显示。但是，如果在那之后，我使用排序或过滤，它不知道该项目已从 ✅ 更改为 ❌。我意识到发生这种情况是因为仅props.data更改了此方法，而不是更改了props，其中包括props.preFilteredRows并且似乎这就是完成排序和过滤的地方。

有没有办法在操作后不重新加载默认排序和过滤来更改状态？

提前致谢！

如何根据日期范围过滤表格数据？

在此处将过滤器设置为日期列：

onClick 功能在这里：

在版本 6 中，这曾经可以工作，一些行没有价格，但original应该指向该行。

但是升级到第7版后，现在我得到了LineMatchingPage.js:121 Uncaught TypeError: Cannot read property 'price' of undefined