React中的Map Issue-this.state.Data.map不是函数

Question

我在ReactJS中无法映射对象。

我正在获取数据，但是一旦映射，就会给我错误： this.state.Data.map不是函数

我的代码正在关注

import React, { Component } from 'react';
// import { Row, Col } from 'antd';
import "antd/dist/antd.css";
 import './orderform.css';
import axios from 'axios';
class Orderform extends Component {

  constructor(props) {
    super(props);
    this.state = { 
      data:[]
     };
  }

componentDidMount() {
    axios.get('http://localhost:5000/api/itemgroup/get-itemgroup')
        .then(res => {
          console.log(res.data);
           this.setState({ data: res.data });
               })

        .catch(function (error) {
            console.log(error);
        })
           }

    render() { 
             return (

           <div>
             <ul>
               {this.state.data.map((itemgroup => {
               return <li key={itemgroup._id}>{itemgroup.item_group_name}</li>
               }))}
             </ul>

           </div>

            );
    }
}

export default Orderform;   

这就是我的错误页面的样子：

Answer 1

您正在获取componentDidMount内部的数据，这意味着该组件已经安装，并尝试获取this.state.data仍然为空数组，因为获取是在安装之后完成的。 确保您拥有尝试传递给jsx的数据：

<div>
   <ul>
      {this.state.data.length > 0
         && this.state.data.map(itemgroup => (
            <li key={itemgroup._id}>
               {itemgroup.item_group_name}
            </li>
         ))
      }
    </ul>
</div>

ps。箭头函数默认返回值