未处理的拒绝(SyntaxError):从API提取数据时

时间:2019-03-10 15:11:06

标签: json reactjs api

我已经在Reactjs和Im中创建了一个简单的项目,试图访问通过mocky.io创建的API。我正在使用Axios从API获取数据。导致此错误:

TypeError: this.state.items.map is not a function
App.render
src/App.js:26
  23 |       <button onClick={this.handleClick}>Show schedule</button>
  24 | 
  25 |          <ul>
> 26 |             { this.state.items.map(item => <li>{item.activity}</li>)}
  27 |           </ul>
  28 |    </div>
  29 | );

代码是:

JS

state = {
   items: []
}
   componentDidMount() {
     axios.get(`http://www.mocky.io/v2/5c754638310000c012c233f0`)
       .then(res => {
         const items = res.data;
         this.setState({ items });
         console.log(this.state.items);
       })
   }

   render() {
      return (
         <div>
            <button onClick={this.handleClick}>Show schedule</button>

               <ul>
                  { this.state.items.map(item => <li>{item.activity}</li>)}
                </ul>
         </div>
      );
   }
}

API

{
    {
        id: "1"
        activity: "lunch"
        startDate: "2019-02-26 13:00"
        endDate: "2019-02-26 12:00"
        location: "somewhere"
    },{
        id: "2"
        activity: "meeting"
        startDate: "2019-02-26 22:00"
        endDate: "2019-02-27 07:00"
        location: "nowhere"
    },{
        id: "3"
        activity: "meeting"
        startDate: "2019-02-26 10:00"
        endDate: "2019-02-26 12:00"
        location: "somewhere"
    },
}

关于什么可能导致此错误的任何想法?谢谢

0 个答案:

没有答案