映射功能在React中不起作用 [英] map function not working in React

问题描述

我是React JS的新手，我正在测试fiddler中的一些功能.我不确定为什么会出现指向map函数的错误.我无法渲染我定义的数组.

I am new to React JS, I was testing out some functions in fiddler. I am not sure why I get an error pointing to the map function. I am not able to render the array i defined.

相关代码段:

      {this.props.data.productSpecs.map(function(productSpec){
        <b>Category Name:</b> {productSpec};
      })}

完整代码:

var productCategory = {
    productName: 'SamamgaTV1',
  productCategory: 'Television', 
  productSpecs: ['32inch','black','hd']
};

var ProductComponent = React.createClass({
  render: function() {
    return( <div>
                        <h2>Product</h2>
              <b>Product Name:</b> {this.props.data.productName}
              <h2>Category</h2>
              <b>Category Name:</b> {this.props.data.productCategory}
              <h2>Specs</h2>
              {this.props.data.productSpecs.map(function(productSpec){
                <b>Category Name:</b> {productSpec};
              })}
           </div>);
  }
});

ReactDOM.render(
  <ProductComponent data={productCategory} />,
  document.getElementById('container')
);

推荐答案

首先您错过了 return ，然后必须返回 ONE 元素.在这里，您将返回一个< p> 和一个 TextNode

First you missed to return, then you must return ONE element. Here you return a <p> and a TextNode

此外，您需要提供唯一的密钥.

Moreover you need to provide a unique key.

尝试一下:

{this.props.data.productSpecs.map(function(productSpec, i){
        return <span key={i}><b>Category Name:</b> {productSpec}</span>;
})}

这篇关于映射功能在React中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！