Question

在我的react项目中，我正在使用Lodash映射遍历记录。

const products = [
  {name: "Apple", description: "A cool apple", qty: 1},
  {name: "Water", descirption: "Some watery water", qty: 3},
]

{map(products, (item, index) => {
  return (
    <tr>{item.name}</tr>
    <tr>{item.description}</tr>
  )
})

如果数量> 1，我想单独列出项目。

在上面的示例中，我想返回以下内容：

Apple | A cool apple
Water | Some watery water
Water | Some watery water
Water | Some watery water

我似乎找到了与_.uniq(array)相反的东西，但找不到用例的解决方案。

谢谢！

Answer 1

使用Array.from()根据qty属性生成项数，然后使用Array.flatMap()（或lodash的_.flatMap()）将结果转换为单个数组：

const Demo = ({ products }) => (
  <table>
  {
    products.flatMap((item, index) =>
      Array.from({ length: item.qty }, () =>(
        <tr>
          <td>{item.name}</td>
          <td>{item.description}</td>
        </tr>
      )))
  }
  </table>
)

const products = [
  {name: "Apple", description: "A cool apple", qty: 1},
  {name: "Water", description: "Some watery water", qty: 3},
]

ReactDOM.render(
  <Demo products={products} />,
  root
)

td + td {
  padding-left: 3px;
  border-left: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

如果只想使用破折号，可以将Array.from()替换为_.times()，然后使用_.flatMap()：

const { flatMap, times } = _

const Demo = ({ products }) => (
  <table>
  {
    flatMap(products, (item, index) =>
      times(item.qty, () =>(
        <tr>
          <td>{item.name}</td>
          <td>{item.description}</td>
        </tr>
      )))
  }
  </table>
)

const products = [
  {name: "Apple", description: "A cool apple", qty: 1},
  {name: "Water", description: "Some watery water", qty: 3},
]

ReactDOM.render(
  <Demo products={products} />,
  root
)

td + td {
  padding-left: 3px;
  border-left: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

您可以将flatMap（本机或Lodash的）与Array.from或Lodash的range（）一起使用

const products = [
  {name: "Apple", description: "A cool apple", qty: 1},
  {name: "Water", description: "Some watery water", qty: 3},
]

products.flatMap(product => Array.from({length: product.qty}, () => product));
// result: 
// [{name: "Apple", description: "A cool apple", qty: 1},
//  {name: "Water", description: "Some watery water", qty: 3},
//  {name: "Water", description: "Some watery water", qty: 3},
//  {name: "Water", description: "Some watery water", qty: 3}]

products.flatMap(({qty, name, description}) => Array.from({length: qty}, () => ({name, description})));
// result: 
// [{name: "Apple", description: "A cool apple"},
//  {name: "Water", description: "Some watery water"},
//  {name: "Water", description: "Some watery water"},
//  {name: "Water", description: "Some watery water"}]

products.flatMap(({qty, name, description}) => range(0, qty).map(() => ({name, description})));
// result: 
// [{name: "Apple", description: "A cool apple"},
//  {name: "Water", description: "Some watery water"},
//  {name: "Water", description: "Some watery water"},
//  {name: "Water", description: "Some watery water"}]

如果需要，是否可以复制地图记录？

2 个答案: