Estoy iterando elementos de matriz de JavaScript usando un bucle for dentro de una función. A continuación se muestra mi matriz.

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

La siguiente función se está utilizando para iterar los elementos de la matriz.

 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; ); } }; 

En el método de procesamiento, llamo a la función de la siguiente manera.

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

Mi problema es usar todas estas funciones y fragmentos de código, solo puedo representar el primer elemento objeto de la matriz. ¿Alguien puede ayudarme a resolver este problema?

En la función showProductElements , en la primera iteración de la cláusula for usted regresa inmediatamente. para que el bucle for no vea otros elementos de su matriz. Debería hacer una matriz e insertar elementos en ella y luego devolver esa matriz, o simplemente usar una función de map sobre su matriz y devolver el resultado.

A continuación se muestra la forma del map (sugiero esto):

 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; ); }}); }; 

Y esta es la forma 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; }; 

Simplemente no use loop en render. Método de matriz .map () : la mejor opción para la matriz de representación de datos de objeto

 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; )); 

podrías probar esto

 {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õ

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.

No debe return en el ciclo; regresará de la función antes de que el ciclo tenga que completarse un cambio. Cámbialo a esto:

 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; ); }}); }; 

deberías usar la función de mapa en lugar de usar el índice para el bucle

 {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;