Объясните ошибку логики в компоненте?

Question

[Erl]

Дано:
объект user
в user входит массив articles (тут id (12,13,14,15))
Что бы добавить статью пользователю я делаю следующее, укажу комментарии в коде

try {
        this.bookmarks = await this.user.articles.map(function (ids) {
          return ids.id; //получаю массив с ID
        });
        this.query = await id.concat(this.bookmarks); //добавляю ID нового article в массив articles с последующим созданием нового массива query
        this.user = await this.$strapi.$users.update("me", {
          articles: this.query, // отправляю данные на сервер для обновления
        });
      } catch (e) {
        this.error = e.response.data.message[0].messages[0].message;
}

Проблема следующая, если быстро нажимать по разным статьям что бы добавить, то добавляются не все, я сделал вывод, что это из-за того, что bookmarks я получаю из user, так же в запросе к серверу я обратно обновляю state user, и получается какой то "порочный" круг.
Как можно исправить это?

Answer 1

[alex4answ]

1. Реорганизуйте работу с state, при добавлении - отправляйте инфу на сервер, но не обновляйте state по результатам этого запроса, обновляйте state локально
2. Используйте конечный автомат, чтобы не спамить запросами во время перехода состояния (но вам все равно ближе 1 вариант)

Comments

[Erl]

а можно чуть подробнее про 2ой вариант?
что за конечный автомат?)

[alex4answ]

Erl, погуглите, я плохо объясняю, и долго буду объяснять, грубо говоря он определяет возможные состояния и переходы между ними

[Erl]

alex4answ, спасибо

[alex4answ]

Erl, но повторюсь, у вас в целом не правильно логика работы построена, что более долгий/новый запрос затирает результат старого, потому вам стоит пересмотреть работу с состоянием