javascript - 无法设置 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: Cannot set property 'innerHTML' of undefinedat test.js:8

Answer 1

您的 function 具有 for 循环添加一些 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 是否正确？