Ajax 呈现存储在状态中的对象

我正在尝试使用.map函数呈现日历的事件摘要。我已将calendar events对象存储在状态中，但找不到方法。映射不同的事件摘要。有什么建议吗

        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>
            );
          }
        }

如果我跳过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>
            );
          }

render（）{
让lista=this.state.items；
设arr=Object.keys（lista.map）（key=>lista[key]）
返回(
{arr.map（（项目，索引）=>{
const summary=item.items.summary；
返回（{summary}）；
})}
);
}

因此，它可能与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>
            );
          }
        }

render（）{
让列表=this.state.items；
常量arr=（list.items | |[]）.map（（item，index）=>{
const summary=item.summary；
返回（{summary}）；
});
返回(
{arr}
);
}
}

整个组成部分：

    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>
            );
          }
        }

导出默认类容器扩展React.Component{
calendarID=“xxx”；
apiKey=“zzz”；
状态={items:[]}；
setEvents=（a）=>{
本条第（a）款；
}
componentDidMount（）{
ajax.get(`https://www.googleapis.com/calendar/v3/calendars/${this.calendarID}/events？fields=items（摘要、id、位置、开始）&key=${this.apiKey}`）
.end（（错误、响应）=>{
如果（！错误和响应（&R））{
this.setEvents（{items:response.body}）；
控制台日志（“成功”）；
console.log（this.state.items）；
}否则{
日志（“错误：”，错误）；
}
});
}
render（）{
让列表=this.state.items；
常量irr=（list.items | |[]）.map（（item，index）=>{
const summary=item.summary；
返回（{summary}）；
});
返回(
{irr}
);
}
}

您遇到了什么错误？也许您不应该映射响应的所有键，而应该映射

项

数组（即

const arr=（lista.items | |[]）.map（（val，index）=>…）

？您能展示一些数据是什么样子吗？另外……我会创建一个构造函数，并在构造函数中创建此.state。我认为问题在于ajax调用和componentDidMount（），而不是在没有componentDidMount（）的情况下在代码上使用.map Quick spike。[检查此处：（）您可以直接将this.state.events分配给arr varibale。（为什么在Object.keys中循环？）为什么在类中使用箭头函数？这可能与箭头函数中“this”的值有关。您会遇到什么错误？也许您不应该映射响应的所有键，而应该映射

项

数组（即

const arr=（lista.items | |[]）.map（（val，index）=>…）

？你能展示一些数据是什么样子吗？还有…我会创建一个构造函数并在构造函数内创建这个.state。我想问题是关于ajax调用和componentDidMount（），而不是在没有componentDidMount（）的代码上使用.map Quick spike。[检查这里（：）您可以直接将this.state.events分配给arr varibale。（为什么在Object.keys中循环？）为什么在类中使用箭头函数？这可能与箭头函数中的“this”值有关。

    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>
            );
          }
        }