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左侧有一个很大的空白空间

我的问题是为什么会发生这种情况？我该如何解决这个问题？

Answer 1

如果没有更多信息，有点难以确定，但这有点像缺少关键属性的组件列表。尝试像

这样的东西

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

Answer 2

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

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