Я перебираю элементы массива JavaScript, используя цикл for внутри функции. Ниже мой массив.

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

Следующая функция используется для итерации элементов массива.

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

В методе рендеринга я вызываю функцию следующим образом.

 {amp}lt;div className="row"{amp}gt; {this.showProductElements()} {amp}lt;/div{amp}gt; 

Моя проблема заключается в использовании всех этих функций и фрагментов кода, я могу визуализировать только первый элемент объекта массива. Может кто-нибудь помочь мне решить эту проблему?

В функции showProductElements при первой итерации предложения for вы сразу же возвращаетесь. поэтому цикл for не видит другие элементы вашего массива. Вы должны либо создать массив и вставить в него элементы, а затем вернуть этот массив, либо просто использовать функцию map над вашим массивом и вернуть результат.

Ниже путь map (я предлагаю это):

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

И это путь Array.push :

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

Только не используйте цикл в рендере. Метод массива .map () — лучший выбор для рендеринга массива данных объекта

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

не могли бы вы попробовать это

 {amp}lt;div className="row"{amp}gt; {productArray.map((product, i) ={amp}gt; {amp}lt;Link to={product.link}{amp}gt; {amp}lt;div className="tableDiv" key={i}{amp}gt; {amp}lt;div className="tableCell"{amp}gt; {amp}lt;div className="channel"{amp}gt; {amp}lt;span{amp}gt; {amp}lt;FontAwesomeIcon icon={product.icon} className="blocks-fa-icon" /{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;h2 className="block-header"{amp}gt;{product.name}{amp}lt;/h2{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Link{amp}gt; } {amp}lt;/div{amp}gt; 
Phi Hùng Võ

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Вы не должны return в цикл — он вернется из функции до того, как цикл завершит изменение. Измените это на это:

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

Вы должны использовать функцию карты вместо использования на основе индекса для цикла

 {amp}lt;div className="row"{amp}gt; { productArray.length {amp}gt; 0 {amp}amp;{amp}amp; productArray.map((product, index) ={amp}gt; { return {amp}lt;Link to={product.link}{amp}gt; {amp}lt;div className="tableDiv"{amp}gt; {amp}lt;div className="tableCell"{amp}gt; {amp}lt;div className="channel"{amp}gt; {amp}lt;span{amp}gt; {amp}lt;FontAwesomeIcon icon={product.icon} className="blocks-fa-icon" /{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;h2 className="block-header"{amp}gt;{product.name}{amp}lt;/h2{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Link{amp}gt; }) } {amp}lt;/div{amp}gt;