javascript - 获取 VANILLA JS 时无法读取未定义的属性 'map'

Question

当我在控制台中一个接一个地启动 splitArray(people, 5) 和 displayContent(0) 函数时，它们工作得很好，但是当我用 .then() 到我的 fetch 方法中，我得到一个 Uncaught TypeError: Cannot read property 'map' of undefined 错误。

我正在尝试制作我的第一个应用程序，该应用程序将 JSON 文件显示为具有分页、排序方法等的表格。我在这里搜索了答案，但我发现的每个线程似乎都与 REACT 有关。我正在尝试使用纯 Vanilla js 来做到这一点。

const endpoint = 'https://api.myjson.com/bins/agowj';
let people = [];
let peeps = [];
fetch(endpoint)
  .then(blob => blob.json())
  .then(data => people.push(...data))
  .then(splitArray(people, 5))
  .then(displayContent(0));

function displayContent(page) {
  let suggestions = document.querySelector('.suggestions');
  let html = peeps[page].map(person => {
    return `
    <tr>
    <td>${person.id}</td>
    <td>${person.firstName}</td>
    <td>${person.lastName}</td>
    <td>${person.dateOfBirth}</td>
    <td>${person.function}</td>
    <td>${person.experience}</td>
    </tr>
    `}).join("");
    suggestions.innerHTML = html;
  };

  function splitArray(arr, size) {
  peeps = [];
  for (i=0; i < arr.length; i += size){
    peeps.push(arr.slice(i, i + size));
  }
  return peeps;
}

我怎样才能使这项工作？

Answer 1

您将这些方法的结果传递给then。您需要传递一个函数:

.then(() => splitArray(people, 5))
.then(() => displayContent(0));