如何在本机反应中动态添加/删除视图？

Question

我正在使用一个数组来实现这一点。要添加，我在数组中推送一个视图并更新数组状态。但我不确定如何删除它，array.pop() 不起作用。即使它这样做了，它也只会删除数组的最后一个元素。我想使用 splice() 之类的东西，我可以在其中传递一个索引，以删除调用其“删除”按钮的视图。但不确定如何实现这一点。有什么建议么？我正在为我的添加和删除方法添加代码。我想删除按下删除按钮的视图。请帮忙！

提前致谢

Answer 1

您不需要自己操作视图，您需要以一种可以对其进行迭代并呈现您想要的适当组件的形状来管理您的数据结构。

为了处理从数组中查找项目并将其删除，我建议您为每个数组项设置一个 ID，因此这意味着您需要将它们转换为对象数组，并且每个对象都应该有一个id 的密钥如下所示：

const myData = [
  { id: 1, val: 'some value' },
  { id: 2, val: 'some other value' },
  // more ...
]

通过这样做，您的 id 将成为按 id 查找项目、按 id 过滤项目并执行您想要的任何结果的关键，并通过将结果数组设置为您的状态，您的 return 组件的一部分将使用状态，并且由于状态总是在您对其进行任何操作后更新，那么您将看到结果正在自动更新！