映射函数仅迭代一次答案

【问题标题】：Map Function is iterating only once映射函数仅迭代一次
【发布时间】：2021-03-03 00:59:53
【问题描述】：

我是 Javascript 的新手，并试图使用 map() 函数来摆弄一些概念。但是，在我的情况下，迭代只有一次。它不显示数组的其他元素。由于此 api 显示随机配置文件，因此根据 APi 响应，我应该看到 20 人，但只有一个人显示在 html 中，而在响应中我可以看到所有 20 人。

const configuration = {
  url: "https://randomuser.me/api/?gender=male",
  numberOfPersons: 20
};

fetch(`${configuration.url}&results=${configuration.numberOfPersons}`)
  .then(function(res) {
    return res.json();
  })
  .then(function(mainResponse) {
    const authors = mainResponse.results;
    return authors.map(function(author) {
      const markup = `
      
        <div class="card">
        <img src="${author.picture.medium}"/>
        <p>${author.name.first} ${author.name.last}</p>
        <button class="primary-button">Call</button>
        </div>
      `;

      document.body.querySelector(".container").innerHTML = markup;
    });
  });

&lt;main class="container"&gt;&lt;/main&gt;

【问题讨论】：

但我的要求是使用地图功能。那么有什么方法可以使用地图功能

标签： javascript ecmascript-6 fetch-api map-function

【解决方案1】：

您覆盖.container 的innerHTML 的每次迭代。相反，您应该返回 html，将其连接在一起，然后设置 innerHTML：

const configuration = {
  url: "https://randomuser.me/api/?gender=male",
  numberOfPersons: 20
};

fetch(`${configuration.url}&results=${configuration.numberOfPersons}`)
  .then(function(res) {
    return res.json();
  })
  .then(function(mainResponse) {
    const authors = mainResponse.results;
    document.body.querySelector(".container").innerHTML = authors.map(function(author) {
      return `
        <div class="card">
        <img src="${author.picture.medium}"/>
        <p>${author.name.first} ${author.name.last}</p>
        <button class="primary-button">Call</button>
        </div>
      `;
    }).join("");
  });

&lt;main class="container"&gt;&lt;/main&gt;

【讨论】：

【解决方案2】：

您的代码正在正确迭代，但您在同一个元素上一遍又一遍地使用innerHTML，这将不断覆盖您之前放入其中的 HTML。

相反，使用+= Addition assignment operator 将生成的HTML 字符串附加到.container 元素：

const configuration = {
  url: "https://randomuser.me/api/?gender=male",
  numberOfPersons: 20
};

fetch(`${configuration.url}&results=${configuration.numberOfPersons}`)
  .then(function(res) {
    return res.json();
  })
  .then(function(mainResponse) {
    const authors = mainResponse.results;
    return authors.map(function(author) {
      const markup = `
      
        <div class="card">
        <img src="${author.picture.medium}"/>
        <p>${author.name.first} ${author.name.last}</p>
        <button class="primary-button">Call</button>
        </div>
      `;

      document.body.querySelector(".container").innerHTML += markup;
    });
  });

&lt;main class="container"&gt;&lt;/main&gt;

但是，正如 cmets 中所指出的，map() 确实不是用于此目的的正确方法。虽然它确实迭代了所有元素并按照您的特定用例的预期工作，但它通常用于对相关数组进行修改的上下文中。您确实应该考虑使用正确方法的方法，例如forEach：

const configuration = {
  url: "https://randomuser.me/api/?gender=male",
  numberOfPersons: 20
};

fetch(`${configuration.url}&results=${configuration.numberOfPersons}`)
  .then(function(res) {
    return res.json();
  })
  .then(function(mainResponse) {
    mainResponse.results.forEach(function(author) {
      const markup = `
      
        <div class="card">
        <img src="${author.picture.medium}"/>
        <p>${author.name.first} ${author.name.last}</p>
        <button class="primary-button">Call</button>
        </div>
      `;

      document.body.querySelector(".container").innerHTML += markup;
    });
  });

&lt;main class="container"&gt;&lt;/main&gt;

【讨论】：

Map 用于生成一个新数组，其中输入的每个元素都经过了一些转换。将数据映射到表示该数据的标记上是 map 的常见用例。