如何在重新渲染时防止扩展的 React-Table 行折叠？

Question

我有一个简单的 react-table，其中包含一个扩展子组件，其数据与Redux状态对象相关联。

当子组件被扩展时，我会触发一个API调用来获取一些额外的数据，以进行惰性加载到Redux存储中。Redux存储将更新为新数据，并且子组件DOM也将成功更新，但问题是重渲染后扩展的行不会保持扩展状态。它会折叠起来。

是否有方法可以在Redux存储更新并触发重新渲染后仍保持扩展行扩展状态？

- LCIII

---

折叠组件的状态是否也由Redux来处理？类似这样：isChildExpanded: boolean - r3dst0rm

@r3dst0rm 不是的。Redux存储只有我的表格和子组件的数据对象。但我想我知道你的意思了 ☺ - LCIII

@LCIII - 提供一个问题的例子，可能只需要保持扩展状态，但也可能更复杂，比如意外卸载。就我的看法而言，我会将扩展状态放在Redux中，这听起来像是本地状态，除非你需要在挂载和卸载过程中保留它。 - Adam Jenkins

没错，我也同意@Adam的观点。将扩展状态放入Redux中（这也是我会放置的地方），以便在多个（重新）渲染中进行控制。[如果您不喜欢Redux的想法，这里有一些额外的想法：也许还有一个选项可以编写自定义钩子来实现相同的功能，但那听起来很糟糕。自定义上下文也可以很好地用于解决此问题。] - r3dst0rm

糟糕，我的意思是，除非你需要它，否则我不会将扩展状态放在Redux中。 - Adam Jenkins

是的，你不应该在redux中保留用于UI的简单标志。对于这个问题，你应该将它保存在表格父状态中。 - h-des

Answer 1

在配置中将autoResetExpanded设置为false，更多详情请查看-https://react-table.tanstack.com/docs/api/useExpanded

- Rohit Garg

Answer 2

对我来说，将collapseOnDataChange设置为false有效。

您还可以尝试freezeWhenExpanded属性，并将其设置为true。

- Saurabh