使用 Fetch API 时出现此错误： Uncaught (in promise) TypeError: packages.map is not a function

Question

我正在使用 Fetch API 从 API 的端点获取一些数据。

我收到此错误：

Uncaught (in promise) TypeError: package.map is not a function

我做了一些研究，似乎发生错误是因为响应是对象而不是数组。

这是一个代码示例：

 const url = 'https://reqres.in/api/users?page=2';

 const fetchPromise = fetch(url);

 fetchPromise.then(response => {

   return response.json();

 }).then(people => {

   // checks response value type
   console.log(typeof people);

   const names = people.map(person => person.name).join('\n');
 });

你可以找到我的sample code here。

Answer 1

希望这是你想要做的事情，

var url = 'https://reqres.in/api/users?page=2';

 var fetchPromise = fetch(url);

 fetchPromise.then(response => {

   return response.json();

 }).then(people => {
     console.log("people" , people.data);
   // checks response value type
   console.log(typeof people);
//here in the response of the people , it was object , but the people.data is array and on which you can use .map() .
   const names = people.data.map(person => person.first_name + " " + person.last_name).join('\n');
   console.log("names ==.>" , names);
 });

Answer 2

您的 API 端点 https://reqres.in/api/users?page=2 正在返回一个对象，您只能将 map 用于数组。我猜你想使用返回对象的数据字段，它是一个人员对象数组。

const url = 'https://reqres.in/api/users?page=2';

 const fetchPromise = fetch(url);

 fetchPromise.then(response => {

   return response.json();

 }).then(people => {

   // checks response value type
   console.log(typeof people);

   const names = people.data.map(person => person.first_name).join('\n');
 });