1

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

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 только, но если я нажимаю на другой, то он заменяет первый, вместо того, чтобы добавиться. Как сделать, чтобы он добавлялся а не замещал? Спасибо.

2
  • Вместо массива можно использовать Set. Пока не работал с этим обьектом, может тебе будет полезно: developer.mozilla.org/ru/docs/Web/JavaScript/Reference/…
    – Locker
    15 мар 2021 в 8:10
  • Если мой ответ был полезен, нажмите кнопку голосования (▲) слева от него. Если он ответил на ваш вопрос, щелкните галочку (✓), чтобы принять его. Таким образом, другие узнают, что вам помогли. Что делать с ответами на мой вопрос? Спасибо.
    – Ajeet Shah
    16 мая 2021 в 16:55

1 ответ 1

0

Во-первых, вам нужно проверить, существует ли 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.