我在react.js中编写for循环时遇到了麻烦

时间:2015-03-19 15:40:05

标签: javascript facebook reactjs

我是编程新手,我正在学习Facebook的react.js。我发现一个网站有一个教程,使用react构建一个“购物车”。我尝试修改它以使用for循环添加更多项目,但它不断给出“意外令牌}”错误,然后出现此错误:

“不变违规:FluxProduct.render():必须返回有效的ReactComponent。您可能已经返回了undefined,数组或其他一些无效对象。”

我意识到有一个类似的问题得到了回答,但它对我没有帮助。

这个项目中有相当多的代码,但是我遇到问题的特定地点看起来像这样:

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"

    );
  },

});

如果您需要/需要原始代码和项目的其余部分,我非常乐意提供它。

2 个答案:

答案 0 :(得分:0)

看起来你正在尝试在for循环中组合三个组件。但是,for循环的结果不会存储到变量中,也不会在返回函数中正确呈现。

// Use a variable to store the result of the loop
return (
  <div>
    {myComponent}
  </div>
)

答案 1 :(得分:0)

在使用循环为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>)
};

所以你需要做的是从渲染中返回一些JSX以对Render做出反应。正如@FelixKling所说,JSX并不神奇,你实际上只是返回了一堆React.createElement函数。