Question

我的数据结构如下：[{category:'Category1', products:[{name:'Product1', price:10},{name:'Product2', price:20}]}]。我想要做的是渲染产品列表，但也使用Category作为列表的Subheader。我正在考虑在另一个.map中使用.map函数，如下所示，但它似乎不起作用。

getList(){
  return (
    this.props.data.map(category =>
      <div>
        <ul>
          <Subheader title={category.category} />
          {category.products.map(product => <li>{product.name}</li>)}
        </ul>
      </div>
    )
  )
}

Answer 1

它可以正常工作，您可以从以下输出中看到：

// Sample component and data:
const Subheader = props => (<h1>{props.title}</h1>);
const category = {category:'Category1', products:[{name:'Product1', price:10},{name:'Product2', price:20}]};

// Render:
ReactDOM.render(
  (
    <div>
      <ul>
        <Subheader title={category.category} />
        {category.products.map(product => (<li>{product.name}</li>))}
      </ul>
    </div>
  ),
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果看不到预期结果，请检查props.data。

反应多个.map

1 个答案: