map（）ES6から小道具を取得して他のコンポーネントに渡す

Question

私はES6に反応していて、products.map（）を通じて正しいjsonオブジェクトを取得しようとすると本当に問題があります。私はいろいろなことを試しましたが、始めたのと同じ場所で終わります。

価格、タイトル、色、およびURLをコンポーネントに渡す必要があるので、私はそれらを通常の小道具のオブジェクトとして使用できるようにする必要があります。

私はオブジェクトから返された推奨関数を使ってリターン（）を試みましたが、PRODUCTSを反復処理し、各インスタンスにタイトル、価格、カラー、URLを割り当てる必要があります。

私が間違っていることに関するアイデアはありますか？

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

私はあなたが本当にしたいことは、このあると思う：

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

か、簡素化：

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

    ... 

、その後

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

ハイライト：

1. map関数の最初のパラメータはproductです。 idではありません。
2. あなたはmapで生成されたコンポーネントを識別するためにkeyを必要とするすべての
3. でmap関数のパラメータを使用していませんでした。
4. this.props.productsをサブコンポーネントに渡していましたが、これは全く異なるものです。