javascript - 重新渲染依赖于 svelte 中的大数组的组件的最佳方法

Question

我的苗条应用程序遇到问题。问题是我有一个从 JSON 文件填充的数组。该数组作为道具传递给子组件。事情是。我想更改数组内容然后重新渲染组件。或者：我想隐藏组件然后再次显示它。问题是，当我尝试这样做时，在第二次更改组件（更新或销毁）后，数组变为空。（仅适用于第一次）

查看我的代码片段：

<script>
    import * as meca from "./meca.json";
    import AppMeca from "./AppMeca.svelte";
    
    let test1 = Object.entries(meca);
    let courses1 = test1[0][1]; //gets the array from the JSON.
    let flag = false;

    function toggleMeca() {
    flag = !flag;
    }

</script>

<button on:click={toggleMeca}> Meca </button>

{#if flag}
    <AppMeca courses={courses1} />
{/if}

在这种情况下我该怎么办？

=================================== 更新1：

我发现问题和我最初想的不一样。主要问题是因为我似乎没有完全理解组件的生命周期。

问题是，在 AppMeca.svelte 组件中有一个 init() 函数。该函数对课程数组进行了一些预处理。问题是当组件被隐藏然后变得可见时，它似乎不是从头开始创建的。它保留了它被摧毁之前的状态。因此，当一开始调用 init() 函数时，它会尝试处理已经预处理过的数组。所以它搞砸了并给出了一个错误，应用程序停止了。

我认为当一个组件被破坏时，它真的被破坏了，但似乎没有。我希望我现在能正确理解它 xD

主要问题解决了。

标签： javascriptsveltesvelte-3svelte-component