試圖從地圖（）ES6中獲取道具並傳遞給其他組件

Question

我正在與反應ES6合作，並試圖通過products.map（）獲取正確的json對象。我已經嘗試了很多不同的東西，但是最終我在同一個地方結束了。

我需要將價格，標題，顏色和網址傳遞給組件，以便我可以將它們用作常規道具對象，但是我嘗試的所有內容都失敗了。我試着用react中的推薦函數來傳遞對象（return（）），但是，我需要遍歷產品併爲每個實例指定一個標題，價格，顏色和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函數的參數都
3. 你需要一個key識別map生成的組件。
4. 您將this.props.products傳遞給子組件，這是完全不同的。