javascript - 我将如何在 svelte reactive 中创建一个 each 循环

Question

我有这个精巧的代码:

    <!--connectprom is a Promise that resolves when connect is ran--->
    {#await connectprom}
    <!--User hasnt yet connected to the server-->
    <form on:submit|preventDefault={connect}>
        <label for="un">Username</label>
        <input type="text" id="un">
    </form>
    {:then}
    <!--After the form was submited (user is connected)-->    
    Welcome, <p class="name text-blue-300">{username}</p>
    <!--When send is ran it sends the data from the form to the socket.io server-->
    <form class="shadow-lg rounded-lg" on:submit|preventDefault={send} align="center">
        <label for="msg">Message:</label>
        <input type="text" id="msg">
    </form>
    {#each messages as msg}
    <Message username=msg.username content=msg.content/>
    {/each}
    {/await}

#each 语句是否可以响应式运行？如果没有，是否有解决方法？

Answer 1

通常 {#each} 语句是响应式运行的，如果变量 messages 发生变化，则应该更新。

但是，要让 Svelte 在数组中注册更新，您必须重新分配变量。

来自 Svelte 文档的一般示例代码:

numbers = [] //TODO: We want a function that adds an item to the end of the array, that is the array Length + 1, so after a few runs it should look like this: [1,2,3,4, ...]

//This doesn't work
function addNumber() {
    numbers.push(numbers.length + 1); //The variable is not reassigned
}

//This does work!
function addNumber() {
    numbers.push(numbers.length + 1);
    numbers = numbers; //This is the reassignment
}

// OR
function addNumber() {
    numbers = [...numbers, numbers.length + 1]; //And this is also the reassignment
}

还有一些针对您的问题的示例代码:

messages = [] //TODO: Have a function that appends a message to the array and forces the {#each} "loop" to update

//This doesn't work
function addMessage(newMessage) {
    messages.push(newMessage); // It's just adding to the array but the array isn't "registered" as updated
}

//This does work!
function addMessage(newMessage) {
    messages.push(newMessage);
    messages = messages; //This is the reassignment and causes the update
}

// OR
function addMessage(newMessage) {
    messages = [...messages, newMessage]; //Another way to add to it and reassign it to also cause an update
}

所以我认为您必须更改将消息附加到 messages 数组的方式。

引用和示例:https://svelte.dev/tutorial/updating-arrays-and-objects