Svelte：强制重绘组件答案

【问题标题】：Svelte: force to redraw a componentSvelte：强制重绘组件
【发布时间】：2021-07-15 14:58:16
【问题描述】：

我有一组图表数据。这些图表可以添加/删除/重新排序。问题是文档中已经存在的组件没有被 Svelte 重绘。

<script>
    // App.svelte
    import Graph from "./Graph.svelte";

    let arr = [];
    
    function add(n) {
        arr.unshift(n)
        arr = arr
    }
    
    add(1)
    setTimeout(() => add(2), 1000)
    setTimeout(() => add(3), 2000)
</script>

{#each arr as number}
    <Graph {number} />
{/each}

<script>
    // Graph.svelte
    import { onMount } from 'svelte'
    
    export let number
    let graph
    
    function updateCanvas() {
        graph = number
    }
    
    updateCanvas(number)
</script>

<div>{graph}</div>

结果是我把第一张图画了三遍。这是因为它始终是数组中的最后一个，并且始终是唯一要渲染的。如何强制重绘每个 Graph ？

https://svelte.dev/repl/cc2ee63a296342a9b71c715fdb16aca6?version=3.37.0

提前致谢。

【问题讨论】：

标签： javascript svelte

【解决方案1】：

如 svelte 教程 here 中明确说明的那样，尝试更新屏幕时，pop 和 unshift 等方法不起作用。但是，您可以使用对我有用的 thisarr = [n,...arr]！

【讨论】：

【解决方案2】：

您需要告诉 Svelte 在每次道具更改时重新运行 updateCanvas。现在updateCanvas(number) 只在启动时运行一次。使其具有响应性就像添加 $: (docs reactive assignment here) 一样简单。 Graph.svelte 的固定代码：

<script>
    // Graph.svelte
    import { onMount } from 'svelte'
    
    export let number
    let graph
    
    function updateCanvas() {
        graph = number
    }
    
    $: updateCanvas(number)
</script>

<div>{graph}</div>

【讨论】：