Wie kann ich eine Map-Funktion in React einbinden?

-1

Ich bin derzeit durch ein Array von Produkten in der Render-Methode zurückgeben Listenelemente für jedes Objekt, ich möchte ein HTML-Select-Tag für die Menge der verfügbaren Produkte zu erstellen. Ich kann mir das nur so vorstellen, indem ich eine Option für jede Menge ausbilde, aber das scheint einen Syntaxfehler zu verursachen, wenn ich es innerhalb der Map-Funktion verwende.Wie kann ich eine Map-Funktion in React einbinden?

Ich kann nicht scheinen, irgendwelche Fragen diesbezüglich zu finden, die ganze Schleife innerhalb der Kartenfunktion, die jsx bereits zurückbringt.

render() { 
    const products = this.props.products.map((product, id) => 

      <li key={id} className='products-list-container' > 

       <div className='product-inner-div-wrapper'> 

        <div className='product-title-container'> 
         <p>{product.name}</p> 
        </div> 

        <div className='product-price-container'> 
         <p>{product.price.formatted_with_code}</p> 
        </div> 

        // THIS IS WHERE I TRY TO LOOP AND CREATE AN OPTION 
        // FOR EVERY QUANTITY 
        <select> 
         { 
          for (var i = 0; i < products.quantity; i++) { 
         return <option value={i}>{i}</option> 
          } 
         } 
        </select> 


        <div className='product-add-item-container'> 
        { product.is.sold_out ? <p>SOLD OUT</p> : 
         <p onClick={() => this.addItem(product.id)}>add to cart</p> 
        } 
        </div> 

        <div className='products-image-container'> 
         <img src={product.media.source} /> 
        </div> 


       </div> 

      </li> 
     ); 
    return(
      <div className='products-list-container'> 
       <ul className='products-list-ul'> 
        {products} 
       </ul> 
      </div> 
     ) 
}

Quelle

2017-08-10 john-raymon

Mögliches Duplikat von [Schleife innerhalb React JSX] (https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) –

Sie könnten eine andere Karte mit der products.quantity machen und die Var darin verwenden Karte. –

@MayankShukla nicht sehen, wie? Mein Code zeigt eine Map-Funktion außerhalb der Rückgabe, die bereits ein jsx-Element zurückgibt. Wie schleife ich innerhalb des jsx Elements, das innerhalb einer Kartenfunktion ist? die geschweiften Klammern scheinen gar nicht in diesem Szenario –

Statt eine Schleife zu schaffen, können Sie eine Karte auch hier mit einigen Array Tricks verwenden können:

{new Array(product.quantity).fill().map((_, i) => <option>{i}</option>)}

Es ist nicht sehr schön - aber man kann diese herausziehen in seine eigene Funktion, und nennen Sie es beschreibend.

Quelle

2017-08-10 09:57:40

Danke, das ist nicht schön, aber es löst das Problem, außer seiner Produkt.Menge, nicht Produkte. aber danke!! –

Sorry wegen des Tippfehlers. Ja, es ist hässlich af, aber es muss nicht nach einigem Refactoring sein =) –

Da dies also eine Menge eines Produktes anzeigen soll, startet der Code, den du mir gegeben hast, alles von 0, also wie bekomme ich diese Schleife hin setze alles von 1 und höher, ohne nur die Variable i zu addieren. –

Wie kann ich eine Map-Funktion in React einbinden?

Antwort

Verwandte Themen