javascript - Svelte：触发子组件中 {#each} 的更新

我正在尝试更新一个子组件，该子组件内部有一个 {#each} 循环，通过使用 push() 将额外的项目添加到由子组件迭代的数组中。虽然单个变量（比如字符串或数字）工作正常，但为 {#each} 循环提供数据的数组似乎不行。

我正在使用bind:将实时数据传递给子组件，也尝试在子组件中使用$: array语句。无论我怎么做，在父组件中向数组推送新数据对子组件都没有效果，有没有办法做到这一点，还是每次都必须拆分并重新渲染整个子组件的{#each}循环？

我已经在 REPL 上发布了我的测试脚本：https://svelte.dev/repl/e1f24f8fccfa4533a1d682d163af9a66?version=3.49.0

在输入框中输入文本，然后点击‘记下’按钮。

如果你观察 JS 控制台，你可以看到数组在扩展，但 {#each} 循环并没有将额外的项渲染到子组件中。

答案＃1

Svelte 的工作方式是它只会检测来自赋值的更新。你可以在这里阅读更多内容：https://svelte.dev/docs#component-format-script-2-assignments-are-reactive。使用诸如 push 之类的方法不会自动触发更新。

在你的情况下，你只需在推送新对象后添加 testData=testData 就可以正常工作。