Javascript I';我在react.js中编写for循环时遇到问题
我是编程新手,正在学习Facebook的react.js。我发现一个网站有一个教程,它使用react构建了一个“购物车”。我试图使用for循环对其进行修改以添加更多项,但它不断给我“意外标记}”错误,然后出现以下错误: 不变冲突:FluxProduct.render():必须返回有效的ReactComponent。您可能返回了未定义的、数组或其他无效对象 我意识到有一个类似的问题得到了回答,但对我没有帮助 这个项目中有很多代码,但我遇到的问题是:Javascript I';我在react.js中编写for循环时遇到问题,javascript,facebook,reactjs,Javascript,Facebook,Reactjs,我是编程新手,正在学习Facebook的react.js。我发现一个网站有一个教程,它使用react构建了一个“购物车”。我试图使用for循环对其进行修改以添加更多项,但它不断给我“意外标记}”错误,然后出现以下错误: 不变冲突:FluxProduct.render():必须返回有效的ReactComponent。您可能返回了未定义的、数组或其他无效对象 我意识到有一个类似的问题得到了回答,但对我没有帮助 这个项目中有很多代码,但我遇到的问题是: render: function() {
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"
);
},
});
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>)
};
render:function(){
var行=[];
var ats=(此.props.cartitems中的this.props.selected.sku)?
this.props.selected.inventory-this.props.cartitems[this.props.selected.sku]。数量:
this.props.selected.inventory;
对于(var i=0;i
{ats>0?'添加到购物车':'售罄'}
}
返回(“焊剂产品详细信息”
);
},
});
如果您想要/需要原始代码和项目的其余部分,我非常乐意提供。看起来您正在尝试在for循环中组合三个组件。但是,for循环的结果没有存储到变量中,也没有在返回函数中正确呈现
// Use a variable to store the result of the loop
return (
<div>
{myComponent}
</div>
)
//使用变量存储循环结果
返回(
{myComponent}
)
在使用循环为React元素生成内容的情况下,我通常将其表述如下:
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"
);
},
});
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>)
};
render:function(){
var项目=[];
for(var i=0;i
因此,您需要做的是从渲染返回一些JSX以进行react-to-render。正如@FelixKling所说,JSX并不神奇,您实际上只是返回了一堆react.createElement函数。正如错误所说,
render
必须返回react元素,但您似乎返回了一个字符串。此外,虽然JSX看起来很神奇,但实际上并非如此。例如,
被转换成类似于React.createElement('div')
的东西,即正常的函数调用。如果您对调用的结果不做任何操作,则不会发生任何事情。例如,您必须分配给某个对象才能使用它。