无法设置 fetch() 之外的变量的内部 HTML

Question

我使用for()循环querySelectorAll匹配项，当前匹配项称为meta[i]。在for()函数中，我使用fetch()从另一个页面获取一些信息。问题是，显然，我无法在fetch()函数中设置meta[i]的内部HTML。这是我的代码：

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;
});
}
}

这是我得到的错误：

未

捕获(在承诺中(类型错误：无法设置未定义的属性"innerHTML"测试.js：8

Answer 1

具有for循环的function会添加一些AJAX调用，当应答时，将调用它们的回调。但是，当调用它们的回调时，由于您的 for，您的函数范围i已经超出了范围。一个非常简单的修复如下：

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;
});
}
}