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

Question

[Dmitry]

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

В чем суть...
При клике на 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, то геттер перестает работать и кнопка не блокируется.
Почему так происходит и как это исправить?

Answer 1

[Dmitry]

В Mobx если к observable полю никто не обращается и оно ни разу не использовалось, то геттер для него работает криво.
Поскольку processId- это уже объект и к нему обратиться очень просто, то нет необходимости в использовании геттера. Вместо

<Button disabled={cart.inProcess(product.id)}>Add to cart</Button>

достаточно написать:

<Button disabled={product.id in cart.processId}>Add to cart</Button>

и все заработает.

Answer 2

[Алексей Николаев]

Видимо, у вас mobx? В console.log вы получаете доступ к самой переменной `processId`, в то время как в остальное время вам нужно только проверить, есть ли там свойство id. Напишите функцию следующим образом, и я уверен, что все будет работать.

@computed get inProcess() {
  return (id) => {
    const processIds = this.processId;
    return processIds.hasOwnProperty(id)
  }
}

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

Comments

[Dmitry]

Да, mobx.
С переменной я так тоже пробовал и такой трюк не сработал.
Дальше в видео выяснится в чем дело, я специально пока поставил на паузу, чтобы сначала самому попытаться разобраться :D