這是Svelte中Arraypush()的問題還是我做錯了什么？-有解無憂

幾個小時以來，我一直在為這個問題絞盡腦汁，雖然我已經找到了解決問題的方法，但我根本無法克服它正在發生的事實。我不明白。在承諾處理程式中使用 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>

uj5u.com熱心網友回復：

其實這與承諾無關。當您添加按鈕并記錄陣列時，您會看到 'foo' 也在 'itemsB' 中，只是沒有呈現。來自 Svelte 檔案

由于 Svelte 的反應性基于分配，因此使用 .push() 和 .splice() 等陣列方法不會自動觸發更新。需要后續分配來觸發更新。
相應的教程

您可以使用 .push() 如果它之后是將陣列重新分配給它自己

itemsB.push(item);
itemsB = itemsB

或者使用擴展運算子語法

itemsB = [...itemsB, item]

這是一個嘗試這個的REPL

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/355584.html

標籤：数组承诺推苗条的

上一篇：“使用相同的識別符號宣告一個字符陣列和一個數字陣列”是什么意思？

下一篇：使用遞回函式查找陣列的最小數