Question

我正在使用助焊剂。当我在控制台中检查时，值即将到来但是当我检查React开发人员工具时，预期值为空。如果我发送一个对象，那么它工作正常。但是如果发送了一个数组，则不显示任何内容。

有人可以告诉我这是什么问题吗？代码和图像如下所示。

代码：

var Product = React.createClass({
   render: function(){
    var product = this.props.product;

    return (<div className="col-md-8"><hr/>
        {product.map(function(items){           
                console.log(" Items in the field :"+JSON.stringify(items));             
            <div className="col-sm-6">
                    <div className="col-sm-4">
                    <img src={"/src/image/"+ items.image}/>
                    </div>
                    <div className="col-sm-2">
                    <h2> {items.name}               </h2>
                    <p>  {items.description}   </p>
                    <h3> Price: ${items.price} </h3>
                    <h4>Inventory: {items.inventory}</h4>
                    </div>
            </div>
        })}
            </div>      
    )
   }  
});

Answer 1

您需要从函数调用返回

var Product = React.createClass({
   render: function(){
    var product = this.props.product;

    return (<div className="col-md-8"><hr/>
        {product.map(function(items){           
                console.log(" Items in the field :"+JSON.stringify(items));

            return (<div className="col-sm-6">
                    <div className="col-sm-4">
                    <img src={"/src/image/"+ items.image}/>
                    </div>
                    <div className="col-sm-2">
                    <h2> {items.name}               </h2>
                    <p>  {items.description}   </p>
                    <h3> Price: ${items.price} </h3>
                    <h4>Inventory: {items.inventory}</h4>
                    </div>
            </div>);
        })}
            </div>      
    )
   }  
});

响应UI中的值为空，但在控制台

1 个答案: