Question

https://github.com/sidhemu/menu_food 因为我是新人的反应在Featured.js文件中，我正在获取请求，我正在获取数据。我面临的问题是在循环中显示这些数据。我试过map（）但是我收到错误“无法读取未定义（...）的属性'map'”。任何人都可以看看代码，请让我知道我在哪里错过了什么或做错了什么。该文件位于src＆gt; js＆gt; Featured.js

中

    export default class Featured extends React.Component {
      constructor(){
      super();
      this.state = { }
    }
    componentWillMount(){
        var url = 'http://ec2-54-165-240-14.compute-1.amazonaws.com:3000/api/foodItem';
     Request.get(url).then((response) => {
       this.setState({
         foodinfo: response.body
       })
     })

  }
  render() {
      console.log(this.state.foodinfo);

    return(
      <div className="container">
        <div className="row">
          <h1>Featured</h1>
          <Card className="col-xs-12 col-sm-4 eachCard">
            <CardImg top width="100%" src="https://tabletopmenu.s3-us-west-2.amazonaws.com/easyPie/Pasta.jpg?AWSAccessKeyId=AKIAJBLST2F5EFKIZGXQ&Expires=2079704677&Signature=eSjrIw32apC0gCGpF92%2FxgnELNA%3D" alt="Card image cap" />
            <CardBlock className="cardBlock">
              <CardTitle>Boom Boom Chicken</CardTitle>
              <CardSubtitle>$8.50</CardSubtitle>
              <span class="glyphicon glyphicon-plus-sign btnClass"></span>
            </CardBlock>
          </Card>         


        </div>
      </div>
    )
  }
}

所以数据我得到的数据就像这样

[
  {
    "food_item_id": "a095eca7-3dcf-11e6-a9f9-28e347",
    "food_group_id": "eb9fa7e9-3dc9-11e6-a9f9-28e347",
    "food_item_name": "Don't know jack",
    "food_item_pic": "https://tabletopmenu.s3-us-west-2.amazonaws.com/easyPie/dont-know-jack.jpg?AWSAccessKeyId=AKIAJBLST2F5EFKIZGXQ&Expires=2080062718&Signature=1OFv2yjaLYBp4lBflKoCOTHl9NQ%3D",
    "food_item_price": 8.5,
    "food_item_price_s": 0,
    "food_item_price_l": 0,
    "food_item_short_desc": "Our signature all beef patty topped with pepper jack cheese, jalapenos, lettuce and mango salsa",
    "food_item_long_desc": "",
    "allergy_profile1": "",
    "allergy_profile2": "",
    "allergy_profile3": "",
    "allergy_profile4": "",
    "drink_pairing1": "",
    "drink_pairing2": "",
    "drink_pairing3": "",
    "drink_pairing4": "",
    "drink_pairing5": "",
    "createdAt": null,
    "updatedAt": null
  },
  {
    "food_item_id": "a09b073d-3dcf-11e6-a9f9-28e347",
    "food_group_id": "ebaeef2c-3dc9-11e6-a9f9-28e347",
    "food_item_name": "Oreo cookie monster",
    "food_item_pic": "https://tabletopmenu.s3-us-west-2.amazonaws.com/easyPie/oreo_cookie_monster.jpg?AWSAccessKeyId=AKIAJBLST2F5EFKIZGXQ&Expires=2080062718&Signature=4OXMof1S%2BDN1pmdQ%2BSHYyWdevvM%3D",
    "food_item_price": 0,
    "food_item_price_s": 11,
    "food_item_price_l": 15,
    "food_item_short_desc": "Oreo cookie filling, crushed oreo topping, powdered sugar",
    "food_item_long_desc": "",
    "allergy_profile1": "",
    "allergy_profile2": "",
    "allergy_profile3": "",
    "allergy_profile4": "",
    "drink_pairing1": "",
    "drink_pairing2": "",
    "drink_pairing3": "",
    "drink_pairing4": "",
    "drink_pairing5": "",
    "createdAt": null,
    "updatedAt": null
  }
]

现在我需要填写这些数据 food_item_name food_item_pic food_item_price

Answer 1

这是因为React在实例化之前尝试访问该变量......

您正在进行异步通话，因此......收到后才能仅 ...

尝试使用空数组在构造函数中实例化state：

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

反应api调用。我能够获取数据但是如何在前端填充

1 个答案: