元素在 're-render' 上的位置错误，原因是未过滤已过滤的数组

Question

我正在显示过滤阵列中的砌体瓷砖。

var myFilteredArray = myArray.filter( (tile) => this.props.filter.indexOf(tile.tag) > -1 )
var tiles = myFilteredArray.map( (tile) => <MyTile/>)

其中 myArray 是一个包含 json 个带有标签字段的对象的数组。 props.filter 是一个字符串数组。

例如props.filter = ["a","b","c"] 和 json 标签是 "a", "b", "c"

当我更新道具过滤器时 props.filter = ["b"]

我看到对象 A 和对象 C 消失了，对象 B 移到了容器的最左边。

然而，当我将返回标签 "a" 和 "c" 添加到 props.filter 时，对象显示在错误的位置。我希望对象按 A、B、C 的顺序排列，并从最左边填满容器。然而，我看到的是对象 B 回到原来的位置，A 和 C 出现在它的顶部或右侧。这意味着对象 B

的左边有一个很大的空白 space

我的问题是为什么会这样？我该如何解决这个问题？

Answer 1

如果没有更多信息，很难确定，但这闻起来像是缺少关键属性的组件列表。试试像

var tiles = myFilteredArray.map( (tile) => <MyTile key={tile.tag}/>)

Answer 2

根据@mattclemens 的建议，这可能是算法的问题。

hacky 解决方案是首先放置一个虚拟 div，像素宽度为 1，高度为 0（反之亦然）。

Elements are in wrong position on a 're-render' caused by unfiltering a filtered array