0

这是我的问题。

我正在使用 react-window 来渲染大表。每行都有自己的本地状态。删除一行后，下一行向上移动并获得已删除行的状态（这就是它在我的应用程序中的外观）。

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

代码框示例| gif 它是如何工作的

4

2 回答 2

0

这里有一个基本问题——react-window 将动态渲染、卸载和重新渲染组件。因此，如果您希望数据在重新渲染中保持不变 - 您必须通过道具和函数传递计数来更改它。将数据与项目数据本身一起存储。

我很快就会尝试展示一个工作演示，但看看这个以了解此代码发生的另一个问题：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

希望这可以帮助。

于 2020-05-16T20:51:39.670 回答
0

简而言之，你不能。问题是，当您删除一个项目时，之前用于该项目的相同组件将用于渲染它之后的项目（因此，如果您删除第二个项目，第三个项目将使用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组件。

于 2020-05-16T21:02:01.700 回答