javascript - 访问函数中的 fetch() 数据

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 4 年前。

我正在尝试学习 React，并尝试为我的网站制作一个链接到公共(public) Google 日历的日历。我花了很长时间才弄清楚如何获取我需要的信息，但我成功了。现在，我遇到了一个问题，它更面向普通的 Javascript...

我的代码如下所示:

import React, { Component } from 'react';

export default class Calendar extends Component {
    async getEventNames() {
        try {
            await fetch('https://clients6.google.com/calendar/v3/calendars/b2f8g8daabnmpqo43v04s6fl3g@group.calendar.google.com/events?calendarId=b2f8g8daabnmpqo43v04s6fl3g%40group.calendar.google.com&singleEvents=true&timeZone=Europe%2FAmsterdam&maxAttendees=1&maxResults=250&sanitizeHtml=false&timeMin=2019-04-01T00%3A00%3A00%2B02%3A00&timeMax=2019-05-06T00%3A00%3A00%2B02%3A00&key=AIzaSyBNlYH01_9Hc5S1J9vuFmu2nUqBZJNAXxs')
                .then(res => {
                    return res.json();
                })
                .then(data => {
                    const nameArr = data.items.map(item => {
                        return item.summary;
                    });
                    console.log(nameArr);
                    return nameArr;
                });
        } catch (err) {
            console.error(err);
        }
    }
    render() {
        const arr = this.getEventNames();
        console.log(arr);
        return <div />;
    }
}

因此，我从日历中获取数据，将其转换为 JSON 数组，将其映射到数组中并返回它。或者至少这就是我想要的......注意有两个console.log()在那里。 getEventNames()里面的那个函数提供了我想要的数组，但是我的 render() 中的数组函数给我“Promise {pending}”。

我对 Promise 一无所知，并且愿意接受有关它们的教育，但是有人可以教我如何将数组从我的函数中取出吗？

谢谢您，祝您复活节愉快(或您文化中的相应 Spring 假期):)

Answer 1

最常见的是使用状态和 componentDidMount，因为它是“从远程端点加载数据”的最佳位置。

import React, { Component } from 'react';

export default class Calendar extends Component {
  constructor(props) {
   super(props);

    this.state = {
      eventNames: []
    }
  }

  componentDidMount() {
    fetch('...')
     .then(res => {
       res.json().then(eventNames => {
         this.setState({eventNames});
       });
    }).catch(err => {
     // Error handling
    })
  }

  render() {
      console.log(this.state.eventNames);
      return <div />;
  }
}

我也同意评论中所述的所有内容，因此请记住这些内容:)

https://reactjs.org/docs/react-component.html#componentdidmount