Можно ли дублировать запись на карте, если это необходимо? - PullRequest
Новая
       7

Можно ли дублировать запись на карте, если это необходимо?

0 голосов
/ 19 февраля 2019

В моем реактивном проекте я использую карту 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), но не могу найти решение для моего варианта использования.

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Вы можете использовать flatMap (нативный или Lodash) с Array.from или диапазоном Lodash () 

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"}]
0 голосов
/ 19 февраля 2019

Используйте Array.from(), чтобы сгенерировать количество элементов в соответствии со свойством qty, и используйте Array.flatMap() (или * lodash's _.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>

Если вы хотите использовать только lodash, вы можете заменить 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>
...