Svelte.js-无法从列表中正确删除项目 [英] Svelte.js - Can't Properly Delete Item From List
问题描述
我正在构建一个应用程序，用户可以在其中添加和删除不同类型"的项目.例如，可能存在用户可以编辑文本的文本类型和用户可以放入图像的图像类型.
I am building an application where users can add and delete items of different "types". For example there may be a text type where users can edit the text, and an image type where users can drop in an image.
在列表中添加项目将导致列表更新并显示所有旧项目以及新项目.同样，删除项目会删除该项目，并使列表仅显示其余项目.
Adding an item to the list will cause the list to update and display all old items along with the new item. Similarly, deleting an item will remove that item and cause the list to only display the remaining items.
添加功能可以很好地工作.当项目属于不同类型时，删除会带来问题.这是我的(简化)代码:
The add functionality works perfectly fine. The issue comes with deletes when the items are of different types. Here is my (simplified) code:
// List.svelte
<script>
import {writable} from "svelte/store";
import Wrapper from "./Wrapper.svelte";
const items = [
{
type: "text",
value: "Test 1"
},
{
type: "img",
value: "https://media.giphy.com/media/KzW9EkUE6NJrwqG0UX/giphy.gif"
}
];
const listStore = writable(items);
</script>
{#each $listStore as item, i}
<Wrapper item={item} store={listStore} myIndex={i} />
{/each}
// Wrapper.svelte
<script>
import {onMount} from "svelte";
export let item;
export let store;
export let myIndex;
let DynamicItem;
const handleDeleteItem = () => {
store.update((items) => ([...items.slice(0, myIndex), ...items.slice(myIndex + 1)]))
}
onMount(async () => {
let imported;
if(item.type === "text") {
imported = await import("./TextItem.svelte")
} else {
imported = await import("./ImgItem.svelte")
}
DynamicItem = imported.default;
})
</script>
<svelte:component this={DynamicItem} data={item} />
<button on:click={handleDeleteItem}>Delete</button>
// TextItem.svelte
<script>
export let data;
</script>
<div contenteditable="true" bind:textContent={data.value} />
// ImgItem.svelte
<script>
export let data;
</script>
<img src="{data.value}" width="100px" height="100px" alt="img alt" />
当用户通过单击第一个删除按钮从列表中删除 TextItem 时， ImgItem 不再显示图像，而是仅将 src 属性呈现为文本.
When the user deletes the TextItem from the list by clicking on the first delete button, the ImgItem no longer displays the image and instead only renders the src attribute as text.
在查看HTML输出时，在执行删除操作之前，它是这样的:
When looking at the HTML output, before the delete action it looks like this:
<body>
<div contenteditable="true">Test 1</div>
<button>Delete</button>
<img src="https://media.giphy.com/media/KzW9EkUE6NJrwqG0UX/giphy.gif" alt="img alt" width="100px" height="100px">
<button>Delete</button>
</body>
然后，它看起来像这样:
And afterwards, it looks like this:
<body>
<div contenteditable="true">https://media.giphy.com/media/KzW9EkUE6NJrwqG0UX/giphy.gif</div>
<button>Delete</button>
</body>
因此，看起来Svelte并不是真正删除 TextItem ，而是将内容从下一项移到其位置.
So it looks like Svelte is not truly deleting the TextItem but moving the content from the next item into its place.
如何修复我的代码，以便真正删除项目?目标应该是通过执行相同的操作来产生以下HTML:
How can I fix my code so that items are truly deleted? The goal should be to produce the following HTML by performing the same action:
<body>
<img src="https://media.giphy.com/media/KzW9EkUE6NJrwqG0UX/giphy.gif" alt="img alt" width="100px" height="100px">
<button>Delete</button>
</body>
感谢您的帮助.谢谢
推荐答案
所以看起来Svelte并不是真正删除TextItem，而是将内容从下一个项目移到了它的位置.
So it looks like Svelte is not truly deleting the TextItem but moving the content from the next item into its place.
是的，绝对是这样.
Svelte(如React)仅在元素的性质明显改变时(例如，如果标签名称不同)，才在给定位置重新创建元素.否则，它被认为是相同的元素/组件，只是一些道具/状态发生了变化.
Svelte (like React) only recreate an element in a given position when its nature has obviously changed, for example if the tag name is not the same. Otherwise, it is considered that it is the same element / component with just some props / state that has changed.
为了提示框架元素的身份已更改，您必须具有 key 功能.在React中，它是一个文字 key 道具.在Svelte中，键仅在 {#each ...} 块中受支持(文档):
In order to hint the framework that the identity of an element has changed, you must the key functionality. In React, it's a literal key prop. In Svelte, keys are only supported in {#each ...} blocks (for now?). The syntax is the following (docs):
{#each expression as name, index (key)}...{/each}
# also works, I think it is an oversight in the docs currently
{#each expression as name (key)}...{/each}
键的值对于每个项目都必须是唯一的，它才能正常工作.通常，您会使用一个排序ID.但实际上，它可以是任何东西.如果元素/组件在给定位置的值更改，则将重新创建它.
The value of the key must be unique to each item for it to work. Typically you'd use an id of sort. But truly, it can be anything. If the value change for the element / component at a given position, then it will be recreated.
因此，就您而言，您可以通过使用项目类型作为键来解决问题，例如:
So, in your case, you could fix your issue by using the item type as a key, for example:
{#each $listStore as item, i (item.type)}
<Wrapper item={item} store={listStore} myIndex={i} />
{/each}
这可以解决您所询问的问题，但是我必须说这不是一个好主意.出于其他原因，您最好将真实的唯一ID添加到商品中，而改用它们.使用上面的代码，相同类型的项目将继续共享DOM元素，而这可能并不是您想要的.例如，您可能对DOM元素(如输入)的焦点或内部状态(值)有疑问.
This fixes the issue you're asking about, but it's not such a great idea I must say. For other reasons, you'd better add real unique ids to your items and use them instead. With the above code, items of the same type will continue to share DOM elements, and that's probably not what you want. You may have issues with focus or internal state (value) of DOM elements like inputs, for example.
因此，类似的方法会更好，并且可能是解决方法:
So, something like this is better and is probably the way to go:
<script>
import {writable} from "svelte/store";
import Wrapper from "./Wrapper.svelte";
const items = [
{
id: 1,
type: "text",
value: "Test 1"
},
{
id: 2,
type: "img",
value: "https://media.giphy.com/media/KzW9EkUE6NJrwqG0UX/giphy.gif"
}
];
const listStore = writable(items);
</script>
{#each $listStore as item, i (item.id)}
<Wrapper item={item} store={listStore} myIndex={i} />
{/each}
这篇关于Svelte.js-无法从列表中正确删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
