Повторное изменение Embed'a выдает ошибку The reply to this interaction has already been sent or deferred. Как исправить?

Question

[Александр Кусак]

Есть функция в которую поступает массив условных объектов IMuteModel.
Из этого массива хочу сделать вывод списка с пагинацией и использую для работы с пагинацией рекурсивную функцию:

protected async renderResponceMessage(mutes: IMuteModel[], interaction: CommandInteraction) {
        let startList: number = (this.page * this.pageLimit) - this.pageLimit;
        let endList: number = this.page * this.pageLimit;
        const isLastPage: boolean = startList < mutes.length && endList >= mutes.length;
        const isFirstPage: boolean = this.page === 1;
        const lastPage: number = mutes.length % this.pageLimit > 0 ?  Math.floor(mutes.length / this.pageLimit) + 1 :  mutes.length / this.pageLimit;

        let context: string = "";
        for(let i: number = startList; i < endList; i++) {
            const mute: IMuteModel = mutes[i];
            if(!mute) break;

            const place: string = mute.place === MutePlacesEN.all ? MutePlacesRU.all : (
                mute.place === MutePlacesEN.current ? MutePlacesRU.current : `<#${mute.place}>`
            );
            const time: number = Math.floor((mute.time + mute.date) / 1000);
            const timeText: string = mute.time === 0 ? "Постоянно" : `<t:${time}>`;
            context += `\n\n` +
                `\`#${i+1}\` **Участник:** <@${mute.userId}> (ID: \`${mute.userId}\`) ` +
                `\n**Выдан:** <@${mute.author}>` +
                `\n**Канал:** ${place}` +
                `\n**Причина:** ${mute.reason}` +
                `\n**Действует до:** ${timeText}`;
        }

        const buttons: ActionRowBuilder<ButtonBuilder> = new ActionRowBuilder<ButtonBuilder>();
        buttons.addComponents(
            new ButtonBuilder()
                .setStyle(ButtonStyle.Secondary)
                .setCustomId(ListActions.first)
                .setDisabled(isFirstPage)
                .setLabel('⏪'),
            new ButtonBuilder()
                .setStyle(ButtonStyle.Secondary)
                .setCustomId(ListActions.preview)
                .setDisabled(isFirstPage)
                .setLabel('◀️'),
            new ButtonBuilder()
                .setStyle(ButtonStyle.Secondary)
                .setCustomId(ListActions.next)
                .setDisabled(isLastPage)
                .setLabel('▶️'),
            new ButtonBuilder()
                .setStyle(ButtonStyle.Secondary)
                .setCustomId(ListActions.last)
                .setDisabled(isLastPage)
                .setLabel('⏩'),
            new ButtonBuilder()
                .setStyle(ButtonStyle.Danger)
                .setCustomId(ListActions.close)
                .setLabel('❌')
        );

        const embed: EmbedBuilder = new EmbedBuilder()
            .setDescription(`**Страница ${this.page} из ${lastPage} - Всего мьютов: ${mutes.length}` +
                `\nСписок активных мьютов**` +
                (context == "" ? "\n\n**Отсутствуют**" : context))
            .setColor("#ff68a0")

        if (!this.rendered) {
            this.rendered = true;
            this.response = await interaction.reply({
                embeds: [embed],
                components: [buttons],
            });
        } else {
            this.response = await interaction.editReply({
                embeds: [embed],
                components: [buttons],
            });
        }

        try {
            const confirmation = await this.response.awaitMessageComponent({ filter: this.collectorFilter, time: 60_000});

            switch (confirmation.customId) {
                case ListActions.first: {
                    this.page = 1;
                    await this.renderResponceMessage(mutes, interaction);
                    break;
                }
                case ListActions.preview: {
                    this.page -= 1;
                    await this.renderResponceMessage(mutes, interaction);
                    break;
                }
                case ListActions.next: {
                    this.page += 1;
                    await this.renderResponceMessage(mutes, interaction);
                    break;
                }
                case ListActions.last: {
                    this.page = lastPage;
                    await this.renderResponceMessage(mutes, interaction);
                    break;
                }
                case ListActions.close: {
                    await interaction.deleteReply();
                    break;
                }
            }
        } catch (e) {
            console.log(e);
            const embed: EmbedBuilder = new EmbedBuilder()
                .setDescription(`Время на просмотр списка истекло`)
                .setColor("#ff68a0")
            await interaction.reply({
                embeds: [embed],
                components: [],
            });
        }
    }

После нажатия на одну из четырех кнопок я получаю ошибку The reply to this interaction has already been sent or deferred. однако первое изменение текста в Embed проходит после нажатия на кнопку.

Мне нужно сделать спокойное хождение по списку этого массива через данные кнопки. Как я могу сохранить возможность изменять сообщение и прослушивать все нажатия на кнопки у данного сообщения без ограничений количества изменения до окончания времени (1 минута)?

Comments

[Александр Кусак]

До этой функции идет отлов события Event.InteractionCreate через кастомный обработчик.

сам обработчик:

protected async process(event: InteractionEvent) {
        if (event.interaction.member.user.bot) {
            return;
        }

        if(event.interaction.isButton()) {
            event.interaction.deferUpdate();
            return;
        }
        
        if (event.interaction.isChatInputCommand()) {
            const interactionOptions: CommandInteractionOptionResolver = event.interaction.options as CommandInteractionOptionResolver;
            const commandName: string = event.interaction.commandName;
            const commandID: string = event.instance.commands.commandsNames.get(commandName);

            if(commandID) {
                // event.instance.commands.executeByName() -> command.run() -> command.renderResponceMessage()
                await event.instance.commands.executeByName(commandID, {
                    interaction: event.interaction,
                    options: interactionOptions,
                    member: event.member,
                })
            }
        }
    }

Проверка, получение массива данных и получение ссылки на экземпляр instance идет в command.run(), после чего в этом же методе вызывается функция класса renderResponceMessage

Я хочу попробовать сделать это все через одну команду с ожиданием события нажатия на кнопку, без дробления новых обработчиков интерактива на каждую кнопку (в начало, предыдущая страница, следующая страница и т.д)

Answer 1

[Александр Кусак]

Нашел как это сделать и воспользовался исходником отсюда https://github.com/JavascriptSimp/discordjs-v14-pa...