重新渲染依赖于大型数组的组件的最佳方法

问题描述

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

查看我的代码段：

<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

主要问题解决了。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript svelte svelte-3 svelte-component