Versucht, Requisiten von map() ES6 zu erhalten und an andere Komponente zu übergeben

Question

Ich arbeite mit react ES6 und habe echte Probleme mit dem Versuch, die richtigen JSON-Objekte durch products.map() zu bekommen. Ich habe viele verschiedene Dinge ausprobiert, aber ich lande am selben Ort wie ich angefangen habe.

Ich muss Preis, Titel, Farbe und URL an die Komponente übergeben, damit ich sie als normale Requisiten-Objekte verwenden kann, aber alles, was ich versuchte, scheiterte bisher.

Ich habe versucht, die empfohlene Funktion zu verwenden, um die Objekte zu übergeben (return()), jedoch muss ich durch PRODUKTE iterieren und jeder Instanz einen Titel, Preis, Farbe und URL zuweisen.

Irgendwelche Ideen, was ich falsch mache?

let PRODUCTS = [ 
{id: 1, price: '$49.99', title: 'Short blue dress', color: 'blue', url:'abc.com'}, 
{id: 2,price: '$9.99', title: 'Green long dress sleeveless', color: 'blue', url:'abc.com'}, 
{id: 3,price: '$29.99', title: 'Blue girl dress', color: 'green', url:'abc.com'}, 
{id: 4,price: '$99.99', title: 'Dress me dirty', color: 'green', url:'abc.com'}, 
{id: 5,price: '$399.99', title: 'Shirt with short sleeves', color: 'yellow', url:'abc.com'}, 
{id: 6,price: '$199.99', title: 'Something Something', color: 'yellow', url:'abc.com'}]; 

class SearchContainer extends Component { 
    static propTypes = { 
     location: PropTypes.object, 
     products: PropTypes.object 
} 

constructor() { 
    super(); 
    this.state = { 
     open: false, 
    }; 
} 

handleDialog = (status) => { 
    console.log(status); 
    this.setState({ open: status }); 
} 

render() { 
var products = PRODUCTS 
return (
    <div className='col-md-12' style={{ margin: '0 auto' }}> 
     <div className='row searchPageHeader' style={{ padding: '10px', backgroundColor: '#1ABC9C' }}/> 
      <Footer /> 
      <SideMenu /> 
      <SearchHeader query={this.props.location.query} /> 
     <div className='row' style={{ textAlign: 'center' }}> 
      <div className='col-md-offset-2 col-md-8 col-md-offset-2'> 
       {products.map((id, index) => 

      <div className='col-md-3' style={{ paddingBottom: '100px' }}> 
       {console.log(products.id)} 
       <CircleButton toggleDialog={this.handleDialog} query={this.props.location.query} products={this.props.product} /> 
      </div> 
     ) 
     } 
     </div> 
     </div> 
     {this.state.open && <Dialog closeOnOverlay={this.handleDialog} />} 
     </div> 
    ); 
    } 
} 

Answer 1

Ich denke, dass das, was Sie wirklich wollen, ist dies:

<div className='col-md-offset-2 col-md-8 col-md-offset-2'> 
    {products.map(product => (
     <div key={product.id} className='col-md-3' style={{ paddingBottom: '100px' }}> 
       {console.log(product.id)} 
       <CircleButton 
        toggleDialog={this.handleDialog} 
        query={this.props.location.query} 
        products={product} 
       /> 
     </div> 
    ))} 
</div> 

oder vereinfacht:

render() { 

    const renderProduct = product => (
     <div key={product.id} className='col-md-3' style={{ paddingBottom: '100px' }}> 
      {console.log(product.id)} 
      <CircleButton 
       toggleDialog={this.handleDialog} 
       query={this.props.location.query} 
       products={product} 
      /> 
     </div> 
    ); 

    ... 

und dann

<div className='col-md-offset-2 col-md-8 col-md-offset-2'> 
    {products.map(renderProduct)} 
</div> 

Highlights:

Der erste Parameter in der map-Funktion ist ein product. Nicht ein id.

Sie die Parameter der map Funktion bei allen benötigen Sie

nicht wurden unter Verwendung eines key zu erzeugenden Komponenten in map zu identifizieren.

Sie bestanden this.props.products zu den Unterkomponenten, die etwas völlig anderes ist.