编码问题，无法使用 API 元素创建数组，Reactjs答案

【问题标题】：Coding problem, can't make array out of API elements, Reactjs编码问题，无法使用 API 元素创建数组，Reactjs
【发布时间】：2019-09-14 17:06:18
【问题描述】：

好的，这是我第一次在 stackoverflow 上发帖，所以基本上我是 JS、React、Web Dev 的新手，我在使用 API 的 JSON 响应中的一些数据制作数组时遇到了麻烦。

我为此遵循了许多类似的教程，但我似乎无法做到正确，也许我在路径上犯了错误。

这是一些 JSON：

meta: {code: 200}
   response:
    holidays: Array(34)
           0:
            date:
             datetime: {year: 2019, month: 1, day: 1}
             iso: "2019-01-01"
__proto__: Object
description: "New Year’s Day (Anul Nou) and the following day, on January 1 and 2 respectively, are annual holidays in Romania."
locations: "All"
name: "New Year's Day"
states: "All"
type: ["National holiday"]
__proto__: Object
           1: {name: "Day after New Year's Day", description: "Both New Year’s Day (Anul Nou) and the following d…d 2 respectively, are annual holidays in Romania.", date: {…}, type: Array(1), locations: "All", …}
           2: {name: "Unification Day", description: "Unification Day celebrates the political union bet…ch is deemed as the foundation of modern Romania.", date: {…}, type: Array(1), locations: "All", …}

这就是我尝试使用 componentDidMount 访问 API 的方式：

componentDidMount() {

   const endpoint = 'https://calendarific.com/api/v2/holidays?api_key=065cc39ad5c1967ae719985ce3850f264f0215b7015d801b098df1ca9fca725b&country=RO&year=2019';
   fetch(endpoint)
   .then(results => results.json())
 }

这就是我尝试创建一个函数的方法，该函数获取数组中所有元素的年月日，并返回另一个仅包含所有日期的数组：

 holidayDateArray(data){
   let holidayDates= data;
   let holidays= holidayDates.response.holidays;
   let holidaysArray= holidays.map((items, i)=>{
     return {items.date.datetime.year}+" "+{items.date.datetime.month}+" "+{items.date.datetime.day}
   });
 }

基本上我希望holidayDateArray 函数返回一个由holidays 数组中所有元素的日期组成的数组。

【问题讨论】：

欢迎来到stackoverflow，尝试做一个可复现的例子How to create a Minimal, Reproducible Example
您的 Json 格式不正确。我会在尝试任何事情之前解决这个问题

标签： javascript reactjs frontend web-frontend

【解决方案1】：

import React, {
  Component
} from "react";

class MyComponent extends Component {
  componentDidMount() {
    const endpoint = 'https://calendarific.com/api/v2/holidays?api_key=065cc39ad5c1967ae719985ce3850f264f0215b7015d801b098df1ca9fca725b&country=RO&year=2019';

    fetch(endpoint)
      .then(response => response.json())
      .then(myJson => {
        const listOfDates = this.getListOfDates(myJson);
        //set listOfDates to a state variable / instance variable and use as necessary
        console.log(listOfDates);
      });
  }

  getListOfDates(myJson) {
    const holidayLists = myJson.response.holidays;
    const dateList = holidayLists.map(holidayListItem => {
      const dateTime = holidayListItem.date.datetime;
      // return dateTime.iso; 
      return `${dateTime.year} ${dateTime.month} ${dateTime.day}`;
    });
    return dateList;
  }
}

【讨论】：

【解决方案2】：

试试这个

   fetch(endpoint)
   .then(results => results.json()).then(r => console.log($.map(r.response.holidays, h => h.date)))

results.json() 将返回一个承诺，因为当反序列化完成时，你也必须等待它。之后，您可以使用 $.map 遍历数组中的所有元素并返回基于属性date的数组

【讨论】：