Javascript TypeError:this.state.tickets.map不是函数（React）

我正试图从api显示一些票证信息，但由于某些原因，映射不起作用

class Tickets extends React.Component {
state = {
tickets: [],
clicked: false,
};
onclicked = () => {
this.setState({ clicked: true });
console.log('helloitsme');


};
  componentDidMount = async () => {
    try {
      const res = await getAllTickets();
      this.setState({ tickets: res });
    } catch (err) {}
  };
  render() {
    return (
      <article>
        <section className="container">
          {this.state.tickets.map((ticket) => (
            <div onClick={this.onclicked} key={ticket._id}>
              {this.state.clicked === true && (
                <div className="boxinfo">
                  <h1 className="info">{ticket.date}</h1>
                  <h2 className="info">{ticket.place}</h2>
                  <h3 className="info">{ticket.price}</h3>
                </div>
              )}
            </div>
          ))}
        </section>
      </article>
    );
  }
}
export default Tickets;

class.Component{
状态={
门票：[]，
点击：错，
};
onclicked=（）=>{
this.setState（{单击：true}）；
console.log（'helloitsme'）；
};
componentDidMount=async（）=>{
试一试{
const res=等待getAllTickets（）；
this.setState（{tickets:res}）；
}捕获（错误）{}
};
render（）{
返回(
{this.state.tickets.map（（ticket）=>(
{this.state.clicked===true&&(
{票证日期}
{票。地点}
{票价}
)}
))}
);
}
}
导出默认票据；

---

我在谷歌上搜索并尝试更改状态数组，但没有任何效果。是否应该提取api？

仅当响应包含一些数据时才添加到状态。还要检查getAllTickets的响应是否返回数组。如果响应不是数组，则可能会出现此类错误。如果响应是数组，并且在响应包含一些数据之前不会设置状态，则下面的方法将起作用

class Tickets extends React.Component {
state = {
tickets: [],
clicked: false,
};
onclicked = () => {
this.setState({ clicked: true });
console.log('helloitsme');


};
  componentDidMount = async () => {
    try {
      const res = await getAllTickets();
      if (res) {
        this.setState({ tickets: res });
      }
    } catch (err) {}
  };
  render() {
    return (
      <article>
        <section className="container">
          {this.state.tickets.map((ticket) => (
            <div onClick={this.onclicked} key={ticket._id}>
              {this.state.clicked === true && (
                <div className="boxinfo">
                  <h1 className="info">{ticket.date}</h1>
                  <h2 className="info">{ticket.place}</h2>
                  <h3 className="info">{ticket.price}</h3>
                </div>
              )}
            </div>
          ))}
        </section>
      </article>
    );
  }
}
export default Tickets;

class.Component{
状态={
门票：[]，
点击：错，
};
onclicked=（）=>{
this.setState（{单击：true}）；
console.log（'helloitsme'）；
};
componentDidMount=async（）=>{
试一试{
const res=等待getAllTickets（）；
如果（res）{
this.setState（{tickets:res}）；
}
}捕获（错误）{}
};
render（）{
返回(
{this.state.tickets.map（（ticket）=>(
{this.state.clicked===true&&(
{票证日期}
{票。地点}
{票价}
)}
))}
);
}
}
导出默认票据；

还要检查您的响应是否包含一些其他数据，这些数据是数组。在这种情况下，如果将res.data作为数组获取，则以下代码适用于您

class Tickets extends React.Component {
state = {
tickets: [],
clicked: false,
};
onclicked = () => {
this.setState({ clicked: true });
console.log('helloitsme');


};
  componentDidMount = async () => {
    try {
      const { data } = await getAllTickets();
      if (data) {
        this.setState({ tickets: data });
      }
    } catch (err) {}
  };
  render() {
    return (
      <article>
        <section className="container">
          {this.state.tickets.map((ticket) => (
            <div onClick={this.onclicked} key={ticket._id}>
              {this.state.clicked === true && (
                <div className="boxinfo">
                  <h1 className="info">{ticket.date}</h1>
                  <h2 className="info">{ticket.place}</h2>
                  <h3 className="info">{ticket.price}</h3>
                </div>
              )}
            </div>
          ))}
        </section>
      </article>
    );
  }
}
export default Tickets;

class.Component{
状态={
门票：[]，
点击：错，
};
onclicked=（）=>{
this.setState（{单击：true}）；
console.log（'helloitsme'）；
};
componentDidMount=async（）=>{
试一试{
const{data}=wait getAllTickets（）；
如果（数据）{
this.setState（{tickets:data}）；
}
}捕获（错误）{}
};
render（）{
返回(
{this.state.tickets.map（（ticket）=>(
{this.state.clicked===true&&(
{票证日期}
{票。地点}
{票价}
)}
))}
);
}
}
导出默认票据；

它看起来像是

等待getAllTickets（）未返回数组。我建议尝试找出它返回的内容。可能只是下一行的
console.log（res）
。