小编mrs*_*999的帖子

我正在使用 Next.js v9，并希望通过将我的应用程序与 Cloudflare Workers 结合使用来利用 Next 的无服务器部署选项。

从 Next.js 文档中，我知道 Next 创建的每个无服务器函数都具有以下签名：

export function render(req: http.IncomingMessage, res: http.ServerResponse) => void

当使用 Node 的http.Server类（express例如使用）时，传入reqandres对象变得微不足道，并且在执行此操作的文档中显示了一个示例。

然而，问题是，CloudFlare的工人使用不同的Request和Response比预计接下来对象。他们Request对象的文档可以在这里找到，他们Response对象的文档可以在这里找到。

因此，在 Cloudflare Workers 上运行的简单“hello world”应用程序如下所示：

// 1. Register a FetchEvent listener that sends a custom
//    response for the given request.
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

// 2. Return a custom request object
async …

我正在构建一个应用程序，用户可以在其中添加和删除不同“类型”的项目。例如，可能存在用户可以编辑文本的文本类型和用户可以放入图像的图像类型。

将项目添加到列表将导致列表更新并显示所有旧项目以及新项目。同样，删除一个项目将删除该项目并导致列表只显示剩余的项目。

添加功能工作得很好。当项目属于不同类型时，问题会出现在删除中。这是我的（简化）代码：

// 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)]))
    } …