反應api電話。我能夠獲取數據，但如何填充在前端

https://github.com/sidhemu/menu_food 因爲我是新的反應在Featured.js文件中，我正在做取得請求，我正在收回數據。我面臨的問題是在循環中顯示這些數據。我嘗試過map（），但是出現錯誤「Can not read property'map of of undefined（...）」。任何人都可以看看代碼，請讓我知道我錯在哪裏或做錯了什麼。文件在src> JS> Featured.js反應api電話。我能夠獲取數據，但如何填充在前端

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

來源

2016-11-25 Sidhemu

請，把代碼在這裏，而不是使用鏈接。此外，鏈接到您的項目的根文件夾，而不是發佈的文件 –

這是因爲React試圖在實例化之前訪問變量...

你正在做一個異步調用所以...它是可用ONLY被接收後...

嘗試實例state在構造函數與空數組：

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

來源

2016-11-25 11:16:58

還有一件事，如果我想從那些「food_group_id」：「ebaeef2c-3dc9-11e6-a9f9-28e347」。 – Sidhemu

提出另一個問題..不明白... –

我只能在90分鐘後發佈 – Sidhemu

反應api電話。我能夠獲取數據，但如何填充在前端

回答

相關問題