無法設置 fetch() 之外的變量的 innerHTML

Question

我正在使用for()遍歷querySelectorAll匹配項，當前匹配項稱為meta[i] 。 在for()函數中，我使用fetch()從另一個頁面獲取一些信息。 問題是，顯然，我無法在fetch()函數中設置meta[i]的innerHTML 。 這是我的代碼：

function variations() {
  var meta = item.querySelectorAll('.meta_items tr td:nth-child(1)'), i;
  var id = 1;
  for (i = 0; i < meta.length; ++i) {
    meta[i].querySelector('input').setAttribute('type', 'hidden');
    meta[i].querySelector('input').value = id;
    fetch('../public/orders.php?id=' + id).then((resp) => resp.text()).then(function(data) {
      meta[i].innerHTML = data;
    });
  }
}

這是我得到的錯誤：

Uncaught (in promise) TypeError: 無法設置 undefinedat test.js:8 的屬性“innerHTML”

Answer 1

具有for循環的function添加了一些 AJAX 調用，當應答時，它們的回調被調用。 然而，當他們的回調被調用時，你的函數范圍的i已經由於你的 for 超出了界限。 一個非常簡單的修復如下：

function variations() {
  var meta = item.querySelectorAll('.meta_items tr td:nth-child(1)');
  var id = 1;
  for (let i = 0; i < meta.length; ++i) {
    meta[i].querySelector('input').setAttribute('type', 'hidden');
    meta[i].querySelector('input').value = id;
    fetch('../public/orders.php?id=' + id).then((resp) => resp.text()).then(function(data) {
      meta[i].innerHTML = data;
    });
  }
}

我沒有改變你定義你的id的方式。 對於所有請求及其回調，id = 1 是否正確？

Answer 2

我想通過取完，由於時間++i ，值了i是meta.length 。 因此，您正在訪問meta[meta.length]並且這是undefined 。 嘗試

function variations() {
  var meta = item.querySelectorAll('.meta_items tr td:nth-child(1)'), i;
  var id = 1;
  for (i = 0; i < meta.length; ++i) {
    const metaI = meta[i];
    metaI.querySelector('input').setAttribute('type', 'hidden');
    metaI.querySelector('input').value = id;
    fetch('../public/orders.php?id=' + id).then((resp) => resp.text()).then(function(data) {
      metaI.innerHTML = data;
    });
  }
}