迭代JavaScript对象数组元素

Question

我正在使用函数内部的for循环迭代JavaScript数组元素。下面是我的数组。

productArray = [
        {
            icon: faBox,
            name: 'CHANNELS',
            link: '/channelList/${channelListId}',
        },
        {
            icon: faVideo,
            name: 'VOD',
            link: '/vodList/${vodId}',
        },
        {
            icon: faMusic,
            name: 'MOD',
            link: null,
        },
]

下面的函数用于迭代数组元素。

showProductElements = () => {
        for (var i = 0; i < this.productArray.length; i++) {
            return (
                <Link to={this.productArray[i].link}>
                    <div className="tableDiv">
                        <div className="tableCell">
                            <div className="channel">
                                <span>
                                    <FontAwesomeIcon icon={this.productArray[i].icon} 
                                     className="blocks-fa-icon" />
                                </span>
                                <h2 className="block-header">{this.productArray[i].name}</h2>
                            </div>
                        </div>
                    </div>
                </Link>
            );
        }
    };

在render方法中，我按如下方式调用该函数。

<div className="row">
  {this.showProductElements()}
 </div>

我的问题是使用所有这些函数和代码片段，我只能呈现数组的第一个对象元素。有人能帮我解决这个问题吗？

Answer 1

在showProductElements函数中，在for子句的第一次迭代中，您将立即返回。因此for循环看不到数组的其他元素。您应该创建一个数组并将元素推入其中，然后返回该数组，或者只需在数组上使用map函数并返回结果。

下面是map方法(我建议这样做)：

showProductElements = () => {
    return this.productArray.map(product => {
        return (
            <Link to={product.link}>
                <div className="tableDiv">
                    <div className="tableCell">
                        <div className="channel">
                            <span>
                                <FontAwesomeIcon icon={product.icon} 
                                 className="blocks-fa-icon" />
                            </span>
                            <h2 className="block-header">{product.name}</h2>
                        </div>
                    </div>
                </div>
            </Link>
        );
    }});
};

这就是Array.push的方式：

showProductElements = () => {
    let tmpArray = [];
    for (var i = 0; i < this.productArray.length; i++) {
            tmpArray.push(
                <Link to={this.productArray[i].link}>
                    <div className="tableDiv">
                        <div className="tableCell">
                            <div className="channel">
                                <span>
                                    <FontAwesomeIcon icon={this.productArray[i].icon} 
                                     className="blocks-fa-icon" />
                                </span>
                                <h2 className="block-header">{this.productArray[i].name}</h2>
                            </div>
                        </div>
                    </div>
                </Link>
            );
        }
    return tmpArray;
};

Answer 2

只是不要在渲染中使用循环。数组方法.map() -对象数据呈现数组的最佳选择

this.productArray.map(item => (
  <Link to={item.link}>
    <div className="tableDiv">
      <div className="tableCell">
        <div className="channel">
          <span>
            <FontAwesomeIcon icon={item.icon} className="blocks-fa-icon" />
          </span>
          <h2 className="block-header">{item.name}</h2>
        </div>
      </div>
    </div>
  </Link>
));

Answer 3

你能试试这个吗？

<div className="row">
  {productArray.map((product, i) => 
    <Link to={product.link}>
      <div className="tableDiv" key={i}>
        <div className="tableCell">
          <div className="channel">
            <span>
                <FontAwesomeIcon icon={product.icon} 
                  className="blocks-fa-icon" />
            </span>
            <h2 className="block-header">{product.name}</h2>
          </div>
        </div>
      </div>
    </Link>
  }
 </div>