反应窗口保存已删除行的状态

Question

这是我的问题。

我正在使用react-window渲染大表。每行都有其自己的本地状态。删除一行后，下一行将上移并获得已删除行的状态（this how it looks in my app）。

是否有解决此问题的方法？我可以使用react-window为每行设置本地状态吗？

codesandbox example | gif how it works

Answer 1

这里存在一个基本问题-react-window将动态渲染，卸载和重新渲染组件。因此，如果您希望数据在重新渲染时得以保留-您必须通过props和函数来更改计数。将数据与项目数据本身一起存储。

我将尽快尝试演示该示例，但是请看一下以了解此代码正在发生的另一个问题：https://codesandbox.io/s/react-window-row-state-problem-mmukt

我已将大小编辑为150，而不是50，这导致窗口获得滚动条。现在，尝试多次单击“两次”。这将增加计数。接下来，滚动到底部并返回上一步。您会看到计数丢失。

这是由于react-window安装和卸载组件的方式。

为了在您的原始代码中解决此问题，我进行了以下修改：1.将计数/活动状态移到父级。2.将updateCount函数传递给TableRow。

基本上，TableRow现在是一个纯组件：）

这里是链接：https://codesandbox.io/s/react-window-row-state-problem-uzsdl

希望这会有所帮助。

Answer 2

简而言之，你不能。问题是，当您删除一个项目时，之前用于该项目的相同组件将用于在其后呈现该项目（因此，如果删除第二个项目，则第三个项目将使用旧的Row第二元素）。它将保持该项目的状态。如果添加useEffect以检测到该项目已更改，那么您将破坏它之后的所有内容（由于所有内容都被颠簸了，所以删除的项目之后的所有项目都将重置其状态。您无权访问该同级物品组件的状态，因此您无法传播状态。

您在这里有一些选择：

1. 将选择添加到项目的属性，并提供一种更新项目的方法。
2. 将App组件状态的选择状态部分，并将其传递给该组件，以便可以进行适当渲染。

我还要补充一点，您可能不想像现在这样绘制每个渲染的大概大项目列表。看来您正在执行此操作以暴露deleteItems。我会推荐类似这样的内容：

<FixedSizeList
  height={500}
  width={300}
  itemCount={items.length}
  itemSize={50}
  itemData={{items, deleteItem}}
>
  {Row}
</FixedSizeList>

然后您的Row组件的data将同时具有items数组和deleteItem功能。如果您在App中保持选定的行状态，则可以轻松地扩展此状态，以将选定的状态和修改功能传递给Row组件。