我正在构建一个应用程序,用户可以在其中添加和删除不同“类型”的项目。例如,可能有用户可以编辑文本的文本类型,以及用户可以放入图像的图像类型。
向列表添加项目将导致列表更新并显示所有旧项目以及新项目。同样,删除一个项目将删除该项目并导致列表仅显示剩余的项目。
添加功能运行得非常好。当项目属于不同类型时,删除就会出现问题。这是我的(简化的)代码:
// 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 属性呈现为文本。
查看 HTML 输出时,在删除操作之前,它看起来像这样:
<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>
然后,它看起来像这样:
<body>
<div contenteditable="true">https://media.giphy.com/media/KzW9EkUE6NJrwqG0UX/giphy.gif</div>
<button>Delete</button>
</body>
所以看起来 Svelte 并没有真正删除 TextItem
,而是将内容从下一个项目移动到其位置。
如何修复我的代码以便真正删除项目?目标应该是通过执行相同的操作生成以下 HTML:
<body>
<img src="https://media.giphy.com/media/KzW9EkUE6NJrwqG0UX/giphy.gif" alt="img alt" width="100px" height="100px">
<button>Delete</button>
</body>
感谢任何帮助。谢谢
最佳答案
So it looks like Svelte is not truly deleting the TextItem but moving the content from the next item into its place.
是的,绝对,这就是正在发生的事情。
Svelte(如 React)仅在其性质明显改变时在给定位置重新创建元素,例如,如果标签名称不同。否则,认为它是相同的元素/组件,只是一些属性/状态发生了变化。
为了提示框架元素的标识已更改,您必须使用 key
功能。在 React 中,它是一个字面上的 key
属性。在 Svelte 中,仅在 {#each ...}
block ( for now? ) 中支持键。语法如下( 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 之类的。但实际上,它可以是任何东西。如果给定位置的元素/组件的值发生变化,那么它将被重新创建。
因此,就您的情况而言,您可以通过使用项目类型作为键来解决问题,例如:
{#each $listStore as item, i (item.type)}
<Wrapper item={item} store={listStore} myIndex={i} />
{/each}
这解决了您所询问的问题,但我必须说这不是一个好主意。出于其他原因,您最好为您的项目添加真正的唯一 ID 并使用它们。使用上面的代码,相同类型的项目将继续共享 DOM 元素,这可能不是您想要的。例如,您可能会遇到 DOM 元素(例如输入)的焦点或内部状态(值)问题。
所以,像这样的东西更好,并且可能是可行的方法:
<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}
关于javascript - Svelte.js - 无法正确从列表中删除项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59080722/