Как правильно сделать счетчик?

Question

[Ольга]

Нужно посчитать сколько объектов было выбрано.
В state есть пустой объект, при клике на карточку в этот объект записывается информация в таком виде id карточки - ключ, состояние (true/false) - значение по этому ключу. Я пытаюсь сделать счетчик карточек, у которых состояние true, для этого прохожу forEach по объекту из state и если id:true то увеличиваю счетчик. Вот код:

constructor(...args) {
		super(...args);
		this.handleOnClick = ::this.handleOnClick;
		this.amountSelectSwatches = ::this.amountSelectSwatches;
		this.state = {
			selectCard: {} //объект, где хранятся выбранные карточки
		};
	}
//по клику делам карточку выделенной и пишем в объект ее id
handleOnClick(i){
		this.setState({
			selectCard: {
				...this.state.selectCard,
				[i]: !this.state.selectCard[i]
			}
		},() => {this.amountSelectSwatches(this.state.selectCard)}); // вызов счетчика

	}
	amountSelectSwatches(obj){
		this.count = 0;
		Object.keys(obj).forEach((i) => {
			if (obj[i]) {
				this.count = this.count + 1;
			}
		});
	}

Работает не так как ожидается, не могу понять в чем ошибка

Comments

[Роман Александрович]

покажите результат кода

Object.keys(obj).forEach((i) => {
			concole.log("item",i)
		});

[Ольга]

Роман Александрович, сделала клик по 3м карточкам take.ms/jC0Ds

[Роман Александрович]

Ольга, окей а как выглядит тогда this.state.selectCard

[Ольга]

Роман Александрович, выбрано 4 карточки take.ms/drRHl

[Роман Александрович]

Ольга,

handleOnClick(i){
		this.setState({
			selectCard: {
				...this.state.selectCard,
				[i]: !this.state.selectCard[i]
			}
		},() => {this.amountSelectSwatches(this.state.selectCard,i)}); // вызов счетчика

	}
	amountSelectSwatches(obj,ind){ 
if(obj[ind]===true){
 this.setState({
count:Object.assign({},this.state.count,{[ind]:++this.state.count[ind]})
})
}}

папробуйте так если я конечно вас правильно понял

[Ольга]

Роман Александрович, спасибо, но я не хотела использовать для count state
В коде проблема скорей всего связанна с асинхронностью setState

[Роман Александрович]

Ольга,

async handleOnClick(i){
		await this.setState({
			selectCard: {
				...this.state.selectCard,
				[i]: !this.state.selectCard[i]
			}
		},() => {this.amountSelectSwatches(this.state.selectCard,i)}); // вызов счетчика

	}
	amountSelectSwatches(obj,ind){ 
if(obj[ind]===true){
 await this.setState({
count:Object.assign({},this.state.count,{[ind]:++this.state.count[ind]})
})
}}

Это заставит ждать выполнения setState

Answer 1

[Роман Александрович]

@melkaya94, <code lang="javascript">
async handleOnClick(i){
		await this.setState({
			selectCard: {
				...this.state.selectCard,
				[i]: !this.state.selectCard[i]
			}
		},() => {this.amountSelectSwatches(this.state.selectCard,i)}); // вызов счетчика

	}
	amountSelectSwatches(obj,ind){ 
if(obj[ind]===true){
 await this.setState({
count:Object.assign({},this.state.count,{[ind]:++this.state.count[ind]})
})
}}
</code>

если вам это не нравится вы можете использовать глобальную переменную для хранения count

Comments

[Ольга]

сделала вот так

handleOnClick(i) {
		const selectCard = {...this.state.selectCard, [i]: !this.state.selectCard[i]};
		this.amountSelectSwatches(selectCard);
		this.setState({
			selectCard
		});
	}

	amountSelectSwatches(obj) {
		this.count = 0;
		Object.keys(obj).forEach(i => {
			if (obj[i]) {
				this.count = this.count + 1;
			}
		});
	}

Answer 2

[davidnum95]

Странный способ хранения выделенных карточек вы выбрали. Зачем вам объект? Храните просто массив.
Пример