渲染存储在状态

Question

我尝试使用.map函数渲染我的日历事件摘要。我已将我的日历事件对象存储在状态中，但无法找到一种方法来映射不同的事件摘要。有什么建议吗？

        export default class Container extends React.Component{
          calendarID="xxx"
          apiKey="zzz";

          state = { events: [] };
          setEvents = (a) => {
            this.setState(a);
          }
          componentDidMount() {
                    ajax.get(`https://www.googleapis.com/calendar/v3/calendars/${this.calendarID}/events?fields=items(summary,id,location,start)&key=${this.apiKey}`)
              .end((error, response) => {
                if(!error && response ) {
                  this.setEvents({events: response.body});
                  console.log("success");
                  console.log(this.state.events);
                } else {
                  console.log("Errors: ", error);
                }
              });
          }
          render(){
            let lista = this.state.events;
            let arr = Object.keys(lista).map(key => lista[key])
            return (
              <div class = "container">
                  {arr.map((event, index) => {
                    const summary = event.summary;
                    return (<div key={index}>{summary}</div>);
                  })}
              </div>
            );
          }
        }

编辑： 谢谢你的回答！这是我在控制台登录this.state.items时ajax调用返回的数据：

    Object {items: Array[1]}
          items: Array[1]
            0: Object
              id: "cmkgsrcohfebl5isa79034h8a4"
              start: Object
              summary: "Stuff going down"

如果我跳过ajax调用并创建自己的状态，则映射有效：

    state =  { items: [
            { items: { summary: "testing"} },
            { items: { summary: "12"} },
            { items: { summary: "3"} }
          ]};

为了实现这一点，我将渲染函数更改为：

    render(){
            let lista = this.state.items;
            let arr = Object.keys(lista).map(key => lista[key])
            return (
              <div class = "container">
                  {arr.map((item, index) => {
                    const summary = item.items.summary;
                    return (<div key={index}>{summary}</div>);
                  })}
              </div>
            );
          }

所以也许它与this.state.items从ajax调用返回的对象有关？

Edit2：@Andrea Korinski，你是对的！我将渲染功能改为此，现在它可以工作：

          render(){
            let list = this.state.items;
            const arr = (list.items || []).map((item, index) => {
              const summary = item.summary;
              return (<div key={index}>{summary}</div>);
              });
            return (
              <div class = "container">
                  {arr}
              </div>
            );
          }
        }

整个组成部分：

    export default class Container extends React.Component{
          calendarID="xxx";
          apiKey="zzz";
          state = {items: []};
          setEvents = (a) => {
            this.setState(a);
          }
          componentDidMount() {
            ajax.get(`https://www.googleapis.com/calendar/v3/calendars/${this.calendarID}/events?fields=items(summary,id,location,start)&key=${this.apiKey}`)
              .end((error, response) => {
                if(!error && response ) {
                  this.setEvents({items: response.body});
                  console.log("success");
                  console.log(this.state.items);
                } else {
                  console.log("Errors: ", error);
                }
              });
          }
          render(){
            let list = this.state.items;
            const irr = (list.items || []).map((item, index) => {
              const summary = item.summary;
              return (<div key={index}>{summary}</div>);
              });
            return (
              <div class = "container">
                  {irr}
              </div>
            );
          }
        }