在 Svelte 中将每个循环嵌套在数组上 - 如何设置唯一的 id / key？

Posted 2023-03-16

【中文标题】在 Svelte 中将每个循环嵌套在数组上 - 如何设置唯一的 id / key？

【英文标题】：Nested each loops over array in Svelte - how to set unique id / key?

【发布时间】：2021-08-20 08:53:04

【问题描述】：

我想在 Svelte 中使用以下形式呈现一个数组，其中包含两个嵌套的 each 循环。

const arr = [
    [ a, b, c ],
    [ d, e, f ],
    [ g, h, i ]
]

#each arr as row, rowIndex
    <div class="row">
        #each row as cell, cellIndex ($arr[rowIndex][cellIndex]) 
            <div class="cell"> cell </div>
        /each
    </div>
/each

演示 REPL -> https://svelte.dev/repl/4dbec2d8c2ac4b6493e78418bd861f4c?version=3.38.2

想要的效果 => 被点击的元素首先消失，然后右边的元素移过来

当设置#each arr as row, rowIndex (rowIndex) + #each row as cell, cellIndex (cellIndex) 时，它的行为不是那样的 (-> https://svelte.dev/repl/e7369788e2614bbbbf9c42cde6a4130a?version=3.38.2)

如果每个单元格的内容是唯一的，像这样在单元格上设置 id 可以正常工作 -> ($arr[rowIndex][cellIndex])

但如果两个单元格包含相同的内容，那就不行了。 （在 REPL 存储中激活 arr 中的最后一个元素 -> '不能在每个键控中具有重复键'）

所以我想知道在这种情况下是否有任何方法可以以不同的方式设置唯一 ID？

我想出了一些将 rowIndex 与 cellIndex 结合起来的方法，例如像 '00, 01, 02, 10, 11, 12, 20, ...' 但这些都不起作用：

rowIndex.toString().concat(cellIndex.toString())
""+rowIndex+cellIndex
+(""+rowIndex+cellIndex)
$arr[rowIndex][cellIndex]+rowIndex+cellIndex

【参考方案1】：

为什么不使用cellIndex 作为内部#each 的键而不是$arr[rowIndex][cellIndex]？这是因为密钥只需要在一个特定的#each 中是唯一的，每个嵌套的#each 最终都是。

【讨论】：

你的意思是这样的？ #each row as cell , cellIndex (cellIndex) 这也没有达到预期的效果 - 请参阅此 REPL svelte.dev/repl/e7369788e2614bbbbf9c42cde6a4130a?version=3.38.2 -> 被点击的元素应该消失，然后右边的元素应该向左移动。就像在第一个版本中实现的一样（仅使用独特的单元格内容）-> svelte.dev/repl/50c0e634709f4ea298420b6076e34546?version=3.38.2

无论删除后的位置如何，您都可以为arr 添加一个对于每个单元格保持相同的 id。所以 id 可能是其行内的初始单元格索引。这些单元格可能是像 color: "#FFFFFF", index: 0 这样的对象。然后，您可以将此索引属性用作键。

可能是一个解决方案，如果可以通过包含 id-content-objects 的派生存储来创建“object-arr”，但仍然不是预期的效果 -> @987654323 @（我认为这是因为derivedArr 被渲染但删除发生在'basic' arr）

没错。我首先想到了派生，但它行不通。但是您可以将索引添加到原始项目中。

是的，当修改原始项目（或原始数组的“未链接”副本）时，它可以工作svelte.dev/repl/d1b0f121b3354dee8e93fd22a83bdb13?version=3.38.2，但这并不能真正解决问题，因为不再有与原始数组的连接并且失去反应性