删除后具有正确索引的 reactjs 映射

Question

我有以下组件

MainObject.map(
(object, key) =>
object.currentItemStatus === "DELETE" ? (
""
) : (
<CustomComponent
key={key}
identifyNumber={key}
/>
)
)

我正在映射它，因此它将被多次显示。当一个组件上有一个属性"DELETE"时，我现在将显示它。它工作正常，但我有一个问题，当我存储在"识别数字"中时，有没有办法使属性"键"正确编号？

因为例如，我的"MainObject"中有 3 个对象，第二个对象被删除或标记为 DELETE。键变量仍将继续计数最多 3 个项目(0,1,2( 而不是 2，因为有一个项目标记为删除。有没有办法做到这一点？

Answer 1

提供索引作为键不正确。重新渲染时会遇到问题。一个对象的键应该是唯一的。尝试使用对象中的某些属性。

https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Answer 2

也许在地图之前使用过滤器会有所帮助：

MainObject
.filter(object => object.currentItemStatus !== "DELETE")
.map((object, key) => (
<CustomComponent
key={key}
identifyNumber={key}
/>
))