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

Question

我已经为这个问题绞尽脑汁好几个小时了，尽管我找到了解决该问题的方法，但我根本无法克服它正在发生的事实。我不明白。在承诺处理程序中使用 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 相同的事情，而且确实如此，除非从承诺处理程序内部调用。

我得到以下结果：

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>

Answer 1

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

由于 Svelte 的反应性基于分配，因此使用 .push() 和 .splice() 等数组方法不会自动触发更新。需要后续分配才能触发更新。
根据教程

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

itemsB.push(item);
itemsB = itemsB

或者使用扩展运算符语法

itemsB = [...itemsB, item]

这是一个REPL来尝试一下