Javascript App.jsx:43未捕获（承诺中）类型错误：this.state.concerts.map不是函数（…；）

当我试图从App.jsx中的ticketmaster api呈现json时，我一直遇到这个错误。我后端的url正在提取数据以显示前10场音乐会的结果。它在我的chrome react控制台中显示得非常好，当我尝试将结果映射到div时，我收到了这个错误消息。请帮帮我

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = {
      concerts: [],
    }
    this.handleZip = this.handleZip.bind(this);
 }
  handleZip(e) {
    e.preventDefault();
    let zip = e.target.value;
    if (zip) {
      fetch(`api/services/ticketmaster/shows/${zip}`)
      .then((response) => {
        response.json().then(concerts => this.setState({
          concerts: concerts._embedded,
      // name: Object.values(concerts._embedded.events[0].images[0]),
      // image: concerts._embedded.events[0].images[0],
      // url: concerts._embedded.events[0].url,
      // info: concerts._embedded.events[0].info,
      // date: concerts._embedded.events[0].classifications[0].name,
        }));
      });
    }
  }
 render() {
    return (
      <div className="search-container">
        <div className="zipcode-search-bar">
        <input onBlur={this.handleZip} type="text" placeholder="Enter      your zip code" />
        </div>
        <div className="zipcode-search-btn">
          <button className="zip-btn" onBlur=    {this.handleZip}>Search</button>
        </div>
        <div>
        {
          this.state.concerts.map((concert) => {
            return (
              <div>
                {concert}
              </div>
            );
          })
        }
      </div>
    </div>
  );
 }
}

export default App;

---

您需要使用内部

事件

数组，而不是外部

\u嵌入的

对象。您可以通过以下两种方式之一实现此目的

将状态设置为保存内部

事件

数组

response.json().then(concerts => this.setState({
          concerts: concerts._embedded.events,
      // name: Object.values(concerts._embedded.events[0].images[0]),
      // image: concerts._embedded.events[0].images[0],
      // url: concerts._embedded.events[0].url,
      // info: concerts._embedded.events[0].info,
      // date: concerts._embedded.events[0].classifications[0].name,
        }));

或

使用状态时，访问内部

事件

数组的内部

this.state.concerts.events.map((concert) => {
  return (
    <div>
      {concert}
    </div>
  );
})

this.state.concerts.events.map（（concert）=>{
返回(
{音乐会}
);
})

您需要使用内部

事件

数组，而不是外部

\u嵌入的

对象。您可以通过以下两种方式之一实现此目的

将状态设置为保存内部

事件

数组

response.json().then(concerts => this.setState({
          concerts: concerts._embedded.events,
      // name: Object.values(concerts._embedded.events[0].images[0]),
      // image: concerts._embedded.events[0].images[0],
      // url: concerts._embedded.events[0].url,
      // info: concerts._embedded.events[0].info,
      // date: concerts._embedded.events[0].classifications[0].name,
        }));

或

使用状态时，访问内部

事件

数组的内部

this.state.concerts.events.map((concert) => {
  return (
    <div>
      {concert}
    </div>
  );
})

this.state.concerts.events.map（（concert）=>{
返回(
{音乐会}
);
})

是

音乐会。_嵌入式

真的是一个数组吗？它是一个包含一个对象数组的对象。我会添加邮递员数据如果你想映射某个东西，它必须是一个数组，所以当你做

setState（{concerts}）

时，提供一个数组。你的JSON无效，那么在setState（{concerts}）之后添加数组。那么，在setState（{concerts}）之前，

concerts.\u嵌入的

真的是数组吗？它是一个包含对象数组的对象。我将添加邮递员数据如果你想映射某个东西，它必须是一个数组，因此当你执行

setState（{concerts}）

时，请提供一个数组。你的JSON无效，请在setState（{concerts}）之后但在setState（{concerts}）之前添加数组。很高兴为你提供帮助。请你把答案标为已接受，如果你觉得慷慨，请投上一票。请您将答案标记为已接受，如果您感到慷慨，请向上投票：-）