изменить пару значений ключа объекта после каждого

Question

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

. Моя главная проблема заключается в том, что при попытке рендеринга списка колод я вообще не вижу, как отображается количество карт. Я не уверен, что это моя функция или мое отображение?

state={
          cardCount: 0,
          currentDeck: [
            {
              name: 'card1',
              count: 0
            },
            {
              name: 'card2',
              count: 0
            },
            {
              name: 'card3',
              count: 0
            }
          ],
  }


//function to check for duplicate cards

 // if the card is already in the deck we add +1 to the count of that card
  addToDeck = (selection) =>{
    let card = {
      name: selection,
      count: (count)=>{ for(var x in this.state.currentDeck){ 
        if(x.name === selection){ 
          count = x.count+=1
        }
        else{
          count = 0
        }
      }  
     }
    }
    this.setState({currentDeck:[...this.state.currentDeck, card]})
  }


//div where I render the decklist

<div className="currentD">
              <h4>Deck List</h4>
                  <ul>
                  {currentDeck.map((card, index, num) => (
                <li className = 'cardinDeckList' key={index}>
                  <strong>{card.name}</strong><span key={num}>x{card.count}</span>
                </li>
              ))}
                  </ul>
            </div>

Answer 1

Недопустимый способ обновления состояния. Ваше состояние будет иметь объект с именем как выбор и считать как функцию, реагировать не вызывает функцию внутри вашего вложенного объекта.

Вы можете использовать метод карты для обновления счетчика, если нет обновления, вы можете добавить новое значение в массив.

addToDeck = (selection) =>{
  let isUpdated = false;

  const updatedDeck = this.state.currentDeck.map(c => {
    if (c.name === selection) {
      isUpdated = true;
      return {...c, count: c.count + 1 };
    }
    return c;
  });
  if(!isUpdated) {
    updatedDeck.push({ name: selection, count: 0 });
  }
  this.setState({currentDeck: updatedDeck })
}