Javascript 出于某种原因，我得到了：fetch（…）。then（…）。then（…）。map不是一个函数

我想对每个项目映射使用一个把手模板。但由于某些原因，我一直得到“fetch（…）。then（…）。then（…）。map不是函数”

这是完整的代码

function getResults(querySearch) {
  api.pageNum += 1;
  refs.list.innerHTML = '';
  const imgBlock = fetch(
    `https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=${querySearch}&page=${api.pageNum}&per_page=12&key=${api.key}`,
  )
    .then(data => {
      return data.json();
    })
    .then(pic => pic.hits)
    .map(item => template(item).join(''));
  refs.list.insertAdjacentHTML('beforeend', imgBlock);
}

车把

import './styles.css';
import template from './templates/template.hbs';

const api = {
  key: '#',
  querySearch: '',
  pageNum: 1,
};

const refs = {
  list: document.querySelector('.gallery'),
  form: document.querySelector('#search-form'),
  input: document.querySelector('input'),
};

refs.input.addEventListener('input', catchInput);

function catchInput(event) {
  console.log(event.target.value);
  getResults(refs.input.value);
  console.log(refs.input.value);
}

function getResults(querySearch) {
  api.pageNum += 1;
  refs.list.innerHTML = '';
  const imgBlock = fetch(
    `https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=${querySearch}&page=${api.pageNum}&per_page=12&key=${api.key}`,
  )
    .then(data => {
      return data.json();
    })
    .then(pic => pic.hits)
    .map(item => template(item).join(''));
  refs.list.insertAdjacentHTML('beforeend', imgBlock);
}

竖起大拇指
{{likes}


可见度
{{可见性}


评论
{{comments}}


云计算下载
{{下载}

你可以通过承诺做很多事情，但是

map（）

不是一个。不过，您可以轻松地重写以下内容：

    <div class="photo-card">
    <img src="{{webformatURL}}" alt="{{webformatURL}}" />
    <div class="stats">
        <p class="stats-item">
            <i class="material-icons">thumb_up</i>
            {{likes}}
        </p>
        <p class="stats-item">
            <i class="material-icons">visibility</i>
            {{visibility}}
        </p>
        <p class="stats-item">
            <i class="material-icons">comment</i>
            {{comments}}
        </p>
        <p class="stats-item">
            <i class="material-icons">cloud_download</i>
            {{downloads}}
        </p>
    </div>
</div>

请记住，

imgBlock

是一个承诺，在问题解决之前，插入邻接TML是绝对没有用的。如果您过早地执行了该代码，则必须将其放入

然后

回调中

如果您可以使用

async

，则此代码非常简单，并且更易于遵循：

function getResults(querySearch) {
  api.pageNum += 1;
  refs.list.innerHTML = '';

  const imgBlock = fetch(
    `https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=${querySearch}&page=${api.pageNum}&per_page=12&key=${api.key}`,
  )
    .then(data => data.json())
    .then(json => {
      let imgBlock = json.hits.map(item => template(item).join(''));

      refs.list.insertAdjacentHTML('beforeend', imgBlock);
    })
}

---

任何减少JavaScript嵌套的方法都会带来巨大的成功，所以我推荐这种方法。

提示：你不能只在

then（）

链的末尾打

map（）

。你能把它重写为

异步

函数吗？这会使代码变得不那么复杂。通常最好在其他代码中引用函数之前定义函数，如

catchInput

，如在

addEventListener

调用中。这可能是个错误。我可能在其他地方犯了错误，因为在你帮助重构之后，我仍然在寻找解决问题的方法……你能检查一下我的代码吗？我更新了一个问题，这是解决这个问题的方法。您的代码中有两个错误：在承诺上使用

map（）

，在承诺得到解决之前使用值。“无法读取eval（index.js？2615:29）中未定义的属性‘map’”这就是我得到的，先生“得到错误”对我们没有帮助。你需要更具体一些。您可能需要在调试器中逐步完成此操作，以查看错误。

async function getResults(querySearch) {
  api.pageNum += 1;
  refs.list.innerHTML = '';

  const data = await fetch(
    `https://pixabay.com/api/?image_type=photo&orientation=horizontal&q=${querySearch}&page=${api.pageNum}&per_page=12&key=${api.key}`,
  );

  let json = await data.json();
  let imgBlock = json.hits.map(item => template(item).join(''));

  refs.list.insertAdjacentHTML('beforeend', imgBlock);
}