时间戳

首页 > 解决方案 > 这是 Svelte 中的 Array push() 的问题还是我做错了什么？

arrays - 这是 Svelte 中的 Array push() 的问题还是我做错了什么？

问题描述

我已经为这个问题绞尽脑汁好几个小时了，虽然我找到了解决这个问题的方法，但我根本无法克服它正在发生的事实。我不明白。在承诺处理程序中使用 Array.push() 似乎存在某种问题。我创建了下面的测试代码来演示它，它可以在 Svelte REPL 中重现。我只是做错了什么吗？

<script>
  const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('foo');
    }, 300);
  });

  let itemsA = [];
  let itemsB = [];

  const addItem = (item) => {
    itemsA[itemsA.length] = item;
    itemsB.push(item);
  }
    
  const loadItems = (last) => {
    addItem("Begin");

    myPromise
      .then((value) => {
        addItem(value);
      });

    addItem("End");
    return true;
  };

  loadItems();
</script>

<div>Items A: {itemsA}</div>
<div>Items B: {itemsB}</div>

我认为 itemsB.push(item) 应该与 itemsA[itemsA.length] = item 做同样的事情，并且它确实如此，除非从 promise 处理程序内部调用。

我得到以下结果：

Items A: Begin,End,foo
Items B: Begin,End

编辑：我已经消除了作为怪异来源的承诺。下面的代码更简单地说明了这一点。

<script>
  let itemsA = [];
  let itemsB = [];

  const addItem = (item) => {
    itemsA[itemsA.length] = item;
    itemsB.push(item);
  }

    const clickHandler = () => {
        addItem('click');
    }
    
    addItem('load');
</script>

<div>Items A: {itemsA}</div>
<div>Items B: {itemsB}</div>
<button on:click={clickHandler}>Click Me</button>

标签： arrayspromisepushsvelte

解决方案

事实上，这与承诺无关。当您添加一个按钮并记录数组时，您会看到“foo”也在“itemsB”中，只是没有呈现。来自 Svelte Docs

因为 Svelte 的反应性是基于赋值的，所以使用 .push() 和 .splice() 等数组方法不会自动触发更新。需要后续分配才能触发更新。
相应的教程

如果 .push() 之后将数组重新分配给自身，则可以使用

itemsB.push(item);
itemsB = itemsB

或者使用扩展运算符语法

itemsB = [...itemsB, item]

这是一个REPL来试试这个

推荐阅读