svelte - Svelte 存储:在 forEach 循环中更新的值不会动态更新(但仍会更改)
问题描述
最小的工作示例在这里:
回复: https ://svelte.dev/repl/ed0fb480159849458c2878d2210e9a40
代码:
App.svelte:
<script>
import { array } from './store.js';
import Child from './Child.svelte'
function classicLoop() {
for (let i=0;i<$array.length; i++) {
$array[i].value ++
}
}
function forEachLoop() {
let i = 0
$array.forEach(el => {
el.value ++;
console.log('loop element:',el);
console.log('store element:',$array[i]);
i++
})
}
</script>
<button on:click={classicLoop}>
Classic loop
</button>
<button on:click={forEachLoop}>
ForEach loop
</button>
<p>
Items:
</p>
{#each $array as item}
<Child {item} />
{/each}
Child.svelte:
<script>
export let item;
</script>
<p>
{item.id} -- {item.value}
</p>
商店.js:
import { writable } from 'svelte/store';
export const array = writable([{id:'first',value:1},{id:'second',value:2},{id:'third',value:3}]);
问题:当在 Svelte Store 中使用 Array.forEach 进行循环时,值会更新(肯定会记录到控制台),但动态绑定不起作用,并且更改在 DOM 中不可见(尽管值仍然在存储中更改)。经典循环工作正常。因此,在使用 forEach 之后,什么都看不到,但是使用经典循环将 DOM 更新为当前(正确的)值。
所以,我当然可能会坚持经典循环,但我想了解这里发生了什么,以及为什么:)
任何评论/提示表示赞赏。
解决方案
Svelte 的反应是由 assignment 触发的。在经典的 for 循环中,您直接分配给$array[i].value
,Svelte 会相应地更新 DOM。在 中forEach
,您分配给中间变量el
。Svelte 不知道设置el
实际上是设置$array[i]
,因此它不会触发更新。
$array
您可以在函数末尾添加分配以强制 Svelte 更新。
function forEachLoop() {
$array.forEach(el => {
el.value ++;
});
$array = $array;
}
推荐阅读
- react-native - React Native - TouchableOpacity 按钮的颜色应该在没有地图的情况下改变
- vue.js - 如何将对象传递给 buefy 组件的 html 属性
- swiftui - 修复难以辨认的 macOS 破坏性警报按钮 (SwiftUI)
- flutter - 根据暗/亮模式将彩色背景替换为颤动应用程序的渐变背景
- .htaccess - 如何在 htaccess 上限制域
- azure-ad-b2c - azure ad b2c 防止密码重复使用
- ada - 我可以在 Ada 中定义自己的二元运算符吗?
- javascript - React.js - Axios 获取 .json 文件。前端
- delphi - 使用 IFMXImageManagerService 时 iOS 上的访问冲突
- r - 无法在具有 Apple M1 芯片的最新 macbook 上加载 R 包 gmm