https://github.com/sidhemu/menu_food因为我是新的反应在Feature.js文件中我正在获取请求,我正在收回数据。 我面临的问题是在循环中显示这些数据。 我试过map()但是我收到错误“无法读取未定义(...)的属性'map'”。 任何人都可以看看代码,请让我知道我错过了什么或做错了什么。 该文件位于src> js> 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
https://github.com/sidhemu/menu_food As I am new in react In Featured.js file I am doing get request and I am getting data back. The problem I am facing is on to display those data in loop. I tried map() but I am getting error "Cannot read property 'map' of undefined(…)". Can anyone please look at the code and please let me know where I am missing something or doing something wrong. The file is in src>js>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> ) } }So the data I am getting the data like this
[ { "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 } ]Now i need to fill with these data food_item_name food_item_pic food_item_price
最满意答案
这是因为React在实例化之前尝试访问变量...
你正在进行异步通话,所以... 只有在收到后才可用...
尝试使用空数组在构造函数中实例化state :
constructor(){ super(); this.state = { foodinfo: [] } }It is because React is trying to access the variable before it was instantiate...
You're doin a async call so... it is available ONLY after it was received...
Try instantiate state in your constructor with an empty array:
constructor(){ super(); this.state = { foodinfo: [] } }更多推荐
发布评论