dmitry-l
@dmitry-l

Как вы объясните эту магию?

Посмотрите видео

В чем суть...
При клике на add to cart происходит запрос к серверу на добавление товара в корзину.
На время этого запроса кнопка должна блокироваться атрибутом disabled

Код кнопки:
<Button onClick={() => cart.add(product.id)} disabled={cart.inProcess(product.id)}>
	Add to cart
</Button>

Класс Cart:
@observable processId = {}

@computed get inProcess() {
	return (id) => {
		console.log(Object.keys(this.processId))
		return this.processId.hasOwnProperty(id)
	}
}

@action add(id) {
	this.processId[id] = true

	this.api.add(id).then(() => {
		this.products.push({id, count: 1})
		delete this.processId[id]
	})
}

Если убрать console.log, то геттер перестает работать и кнопка не блокируется.
Почему так происходит и как это исправить?
  • Вопрос задан
  • 288 просмотров
Решения вопроса 1
dmitry-l
@dmitry-l Автор вопроса
В Mobx если к observable полю никто не обращается и оно ни разу не использовалось, то геттер для него работает криво.
Поскольку processId- это уже объект и к нему обратиться очень просто, то нет необходимости в использовании геттера. Вместо
<Button disabled={cart.inProcess(product.id)}>Add to cart</Button>

достаточно написать:
<Button disabled={product.id in cart.processId}>Add to cart</Button>

и все заработает.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Видимо, у вас mobx? В console.log вы получаете доступ к самой переменной `processId`, в то время как в остальное время вам нужно только проверить, есть ли там свойство id. Напишите функцию следующим образом, и я уверен, что все будет работать.
@computed get inProcess() {
  return (id) => {
    const processIds = this.processId;
    return processIds.hasOwnProperty(id)
  }
}


А вот почему так - самому интересно)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы