[英]I'm having trouble writing a for loop in react.js
I'm new to programming and I'm learning Facebook's react.js. 我是编程新手,正在学习Facebook的react.js。 I found a website that has a tutorial which builds a "shopping cart" using react. 我找到了一个网站,该网站的教程使用react构建“购物车”。 I tried to modify it to add more items using a for loop but it keeps giving me "unexpected token }" errors followed by this error: 我尝试使用for循环对其进行修改以添加更多项目,但它始终显示“意外令牌}”错误,并随后出现以下错误:
"Invariant Violation: FluxProduct.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object." “不变违反:FluxProduct.render():必须返回一个有效的ReactComponent。您可能已经返回了未定义,数组或其他无效对象。”
I realize there is a similar question that was answered but it didn't help me. 我意识到有人回答了类似的问题,但这并没有帮助我。
There is quite a bit of code in this project but the particular spot I'm having trouble with looks like this: 这个项目中有很多代码,但是我遇到的特定地方看起来像这样:
render: function() {
var rows = [];
var ats = (this.props.selected.sku in this.props.cartitems) ?
this.props.selected.inventory - this.props.cartitems[this.props.selected.sku].quantity :
this.props.selected.inventory;
for (var i=0; i<2; i++){<div className="flux-products">
<img src={'img/' + this.props.product.image}/>
<div className="flux-products-detail">
<h1 className="name">{this.props.product.name}</h1>
<p className="description">{this.props.product.description}</p>
<p className="price">Price: ${this.props.selected.price}</p>
<select onChange={this.selectVariant}>
{this.props.product.variants.map(function(variant, index){
return (
<option key={index} value={index}>{variant.type}</option>
)
})}
</select>
<button type="button" onClick={this.addToCart} disabled={ats > 0 ? '' : 'disabled'}>
{ats > 0 ? 'Add To Cart' : 'Sold Out'}
</button>
</div>
</div>}
return ("flux-products-detail"
);
},
});
If you want/need the original code and the rest of the project I'd be more than happy to provide it. 如果您想要/需要原始代码和项目的其余部分,我将非常乐意提供它。
It looks like you are trying to compose three components in the for loop. 似乎您正在尝试在for循环中组成三个组件。 However the result of the for loop is not stored to a variable, and not rendered properly in the return function. 但是,for循环的结果未存储到变量中,并且未在return函数中正确呈现。
// Use a variable to store the result of the loop
return (
<div>
{myComponent}
</div>
)
In the case of using a loop to generate content for a React element, I usually formulate it something like this: 在使用循环为React元素生成内容的情况下,我通常将其表达如下:
render: function() {
var items = [];
for(var i = 0; i < this.state.listOfItems.length; i++) {
items.push( <ItemComponent value={this.state.listOfItems[i].value} />
}
return ( <div> {items} </div>)
};
So what you need to do is return from render some JSX for react to Render. 因此,您需要做的是从render返回一些JSX以对Render做出反应。 as @FelixKling said, JSX isn't magic, you're essentially just returning a bunch of React.createElement functions. 就像@FelixKling所说的那样,JSX并不是魔术,实际上您只是返回了一堆React.createElement函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.