循环遍历数组的每个块都不能在 svelte 中工作

Question

所以我一直在研究这个 svelte 项目，它是一个笔记应用程序。所以我的目标是，每当我按下提交按钮时，便条就会被添加到一个数组中，并且该数组会以每个块的形式打印出来。但是我的数组得到了更新，但我的 UI 没有。每次我按下提交按钮时，我都会让控制台记录数组。我还必须添加任何组件。你可以看看我的代码：

    let value = ""

    let values = []

    function logic(){
        values.push(value)
    }
    
</script>

<input type="text" bind:value={value}>
<br>
<button on:click={logic}>Submit</button>
<hr>


{#each values as name, index}
        <li>{index} - {name}</li>
{/each}


<style>
    input {
        height:100px;
        width: 200px;
        margin-bottom: 1em;
    }
    button{
        height: 50px;
        width: 100px;
    }
</style>

希望你能找到问题所在，提前致谢

Answer 1

您的问题似乎是因为将项目推入数组不会触发 Svelte 的反应性。由于从数组存储到变量中的值只是内存位置，Svelte 不会检测到变量的任何变化，因为它改变的是数组的值而不是变量。

苗条的开发者建议尝试重新分配数组的值，例如：


<script>
    let value = ""

    let values = []

    function logic(){
        // As you can see here, I'm reassigning the array.
        values = [...values, value]
    }
    
</script>

<input type="text" bind:value={value}>
<br>
<button on:click={logic}>Submit</button>
<hr>


{#each values as name, index}
        <li>{index} - {name}</li>
{/each}


<style>
    input {
        height:100px;
        width: 200px;
        margin-bottom: 1em;
    }
    button{
        height: 50px;
        width: 100px;
    }
</style>

这是 Svelte 文档提供的教程： https://svelte.dev/tutorial/updating-arrays-and-objects

循环遍历数组的每个块都不能在 svelte 中工作

Each block looping through array is not working in svelte

sveltekit