Фильтр массива на дублиакты react

Question

Есть массив объектов:

dataSet: [
{ name: "Имя1", image: "img.jpeg", author: "Александр Полтавченко", date: "21.02.2020", id: 1 },
      { name: "Имя2", image: "img.png", author: "Александр Полтавченко", date: "21.02.2020", id: 2 },
],
addedToCart: []

есть функция добавления в массив addedToCart:

added =  (id) => {

  this.setState (( { addedToCart, dataList  } )=>{

  const newItem = dataSet.filter(el=>el.id===id);
  const testArr = [...addedToCart ];
  const filteredATC = testArr.filter((item, el)=>{
    if(addedToCart.indexOf(item)===el){
      item.count++
     return item, el
  }
  else {
    return item
  }

Если я тыкаю добавить на любом элементе, то как и хотелось бы, он добавляется только один и увеличивается count только, но если я нажимаю на другой, то он заменяет первый, вместо того, чтобы добавиться. Как сделать, чтобы он добавлялся а не замещал? Спасибо.

Answer 1

Во-первых, вам нужно проверить, существует ли id в addedToCart. Если он существует, увеличьте count, иначе push новый element в массив.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      dataSet: [
        {
          name: 'Имя1',
          image: 'img.jpeg',
          author: 'Александр Полтавченко',
          date: '21.02.2020',
          id: 1,
        },
        {
          name: 'Имя2',
          image: 'img.png',
          author: 'Александр Полтавченко',
          date: '21.02.2020',
          id: 2,
        },
      ],
      addedToCart: [],
    }
  }

  added = (id) => {
    this.setState(({ addedToCart }) => {
      let found = false
      const newAddedTocart = addedToCart.map(item => {
        if (!found && item.id === id) {
          found = true
          return {...item, count: item.count + 1 }
        }
        return item
      })
      return { addedToCart : found ? newAddedTocart : newAddedTocart.concat([{id, count: 1}]) }
    })
  }

  render() {
    return (
      <div>
        <div>{JSON.stringify(this.state.addedToCart)}</div>
        {this.state.dataSet.map((data) => {
          return (
            <React.Fragment key={data.id}>
              <div>
                {data.name}, {data.author}
              </div>
              <button onClick={() => this.added(data.id)}>Add</button>
            </React.Fragment>
          )
        })}
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('mydiv'))

<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>

<body>
  <div id="mydiv"></div>
</body>

БЛОГ НА HUSL

Фильтр массива на дублиакты react

Ответы (1 шт):