试图从地图（）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传递给子组件，这是完全不同的。