Discord.js按钮收集器实用技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《Discord.js 按钮收集器管理技巧》，聊聊，我们一起来看看吧！

1. 理解Discord.js中的“未知交互”错误（10062）

在Discord.js机器人开发中，DiscordAPIError[10062]: Unknown interaction是一个常见的错误，它表示机器人尝试对一个已经无效或已被处理的交互（Interaction）进行操作。

错误原因： Discord API对交互的响应有严格的时间限制和状态管理：

• 首次响应时限： 当用户与一个组件（如按钮）进行交互时，机器人必须在3秒内对该交互进行首次响应（例如，使用interaction.reply()、interaction.deferReply()、interaction.update()或interaction.deferUpdate()）。如果未在规定时间内响应，该交互令牌将失效，后续尝试操作将导致“未知交互”错误。
• 交互令牌过期： 即使进行了首次响应，交互令牌的生命周期也是有限的（通常为15分钟）。长时间未对同一交互进行后续更新，令牌也可能过期。
• 重复响应： 同一个交互不能被多次“首次响应”。例如，你不能先reply()，然后又尝试update()同一个交互（除非你先deferReply()或deferUpdate()）。
• 多个收集器争抢： 当多个MessageComponentCollector同时监听同一条消息上的组件，并且它们都尝试处理同一个交互时，可能导致竞争条件，其中一个收集器成功处理，而其他收集器尝试处理时就会遇到“未知交互”错误。

在提供的代码示例中，错误栈指向InteractionCollector. (...\buttons\moderates\listRaiting.js:51:7)，这强烈暗示listRaiting.js中的处理逻辑在尝试更新交互时，该交互已经失效或已被其他地方处理。

2. 多重按钮收集器管理与冲突分析

原始代码中，moderate斜杠命令旨在创建一个包含多个按钮的面板。它创建了一个主收集器来监听所有这些按钮的点击事件。

// 原始代码片段
const collectors = {}; // 全局或模块级对象，用于存储收集器

async function createCollector(interaction, customId, executeFunction) {
  // ... 此函数创建一个针对特定 customId 的收集器 ...
}

module.exports = {
  // ...
  async execute(interaction) {
    // ... 角色检查 ...

    // 尝试停止所有旧的收集器，但这里的实现可能不完善
    for (let collector in collectors) {
        collectors[collector].stop();
    }

    const filter = i => i.user.id === interaction.user.id;
    const collector = interaction.channel.createMessageComponentCollector({ filter, time: 30000 }); // 主面板收集器

    // ... 构建并发送嵌入消息和按钮 ...

    collector.on('collect', async i => {
      switch (i.customId) {
        case 'mute':
          await muteButton.execute(i); // 这里调用了外部模块的 execute 方法
          break;
        // ... 其他按钮处理 ...
      }
    });

    collector.on('end', collected => {
      console.log(`Collector для реакций завершен. Собрано ${collected.size} элементов.`);
    });
  },
};

潜在问题分析：

1. 交互未及时响应： 最直接的原因是muteButton.execute(i)、listRaitingButton.execute(i)等被调用的函数内部未能及时对传入的交互i进行响应（deferUpdate()、update()或reply()）。如果这些函数执行了耗时操作，而没有在3秒内发送任何响应，就会导致“未知交互”错误。
2. collectors对象管理不当： 原始代码中的collectors对象是一个简单的JS对象，它没有明确的键来关联特定的用户或消息。如果多个用户同时使用/moderate命令，或者同一个用户在不同频道使用，collectors对象可能无法正确停止对应的旧收集器，导致多个收集器同时活跃，增加冲突风险。
3. createCollector函数的用途： 原始代码中有一个独立的createCollector函数，但它并未在moderate命令的主execute方法中被用于创建面板按钮的收集器。如果这个createCollector函数被用于在muteButton.execute等模块中创建新的、临时的收集器，那么就需要特别注意其生命周期和与主交互的关联。

3. 解决方案一：确保交互及时响应

这是解决“未知交互”错误最关键的一步。所有处理按钮交互的函数都必须在3秒内发送响应。

实现方式：

在每个处理按钮点击的模块（如muteButton.js, listRaiting.js等）的execute方法中，首先使用interaction.deferUpdate()或interaction.deferReply({ ephemeral: true })来告知Discord你正在处理这个交互。

示例代码（buttons/moderates/listRaiting.js）：

// buttons/moderates/listRaiting.js
module.exports = {
    async execute(interaction) {
        // 1. 立即告知Discord正在处理该交互
        // 如果你的操作需要较长时间，使用 deferUpdate() 或 deferReply()
        // deferUpdate() 会使按钮显示加载状态，不发送新消息
        // deferReply() 会发送一个临时或永久的回复
        if (interaction.deferred || interaction.replied) {
            // 如果交互已经被推迟或回复，则避免重复操作
            return;
        }
        await interaction.deferUpdate(); // 或者 await interaction.deferReply({ ephemeral: true });

        try {
            // 2. 执行你的业务逻辑
            // 例如，获取评分列表，构建嵌入消息
            const raitingList = await fetchRaitingList(); // 假设这是一个异步操作

            const embed = new EmbedBuilder()
                .setColor(0x00FF00)
                .setTitle('当前评分用户列表')
                .setDescription(raitingList.length > 0 ? raitingList.map(user => `- ${user.username}`).join('\n') : '目前没有评分用户。');

            // 3. 更新原始消息或发送后续消息
            // 注意：deferUpdate() 后，可以使用 editReply() 或 followUp()
            await interaction.editReply({ embeds: [embed], components: [] }); // 更新原始消息，移除按钮
            // 或者 await interaction.followUp({ embeds: [embed], ephemeral: true }); // 发送一个新消息
        } catch (error) {
            console.error('处理listRaiting按钮时发生错误:', error);
            // 4. 错误处理，确保用户得到反馈
            await interaction.followUp({ content: '获取评分列表时发生错误。', ephemeral: true });
        }
    },
};

注意事项：

• deferUpdate()：适用于你只想更新原始消息组件的情况。它会在按钮上显示一个加载动画，并且不发送新的回复。之后你可以使用interaction.editReply()来更新消息。
• deferReply({ ephemeral: true })：适用于你希望发送一个只有交互用户可见的临时回复，同时为后续操作争取时间。之后可以使用interaction.followUp()发送后续消息。
• reply()或update()：如果你的操作非常快，可以直接使用这些方法进行首次响应。但通常为了稳妥，defer系列方法更常用。

4. 解决方案二：管理活跃的面板收集器

为了避免多个moderate命令面板同时活跃导致的冲突，我们需要一个更健壮的机制来存储和停止旧的收集器。使用Map来存储以用户ID和频道ID为键的收集器是一个好方法。

实现方式：

创建一个Map来存储活跃的收集器，并在每次/moderate命令执行时，检查并停止之前为同一用户/频道创建的收集器。

示例代码（commands/moderate.js）：

const { SlashCommandBuilder } = require('@discordjs/builders');
const {
  ActionRowBuilder,
  ButtonBuilder,
  EmbedBuilder,
  ButtonStyle,
} = require('discord.js');

// 导入所有按钮处理模块
const muteButton = require('../../buttons/moderates/muteButton.js');
const unMuteButton = require('../../buttons/moderates/unMuteButton.js');
const warnButton = require('../../buttons/moderates/warnButton.js');
const unWarnButton = require('../../buttons/moderates/unWarnButton.js');
const listRaitingButton = require('../../buttons/moderates/listRaiting.js');
const infractionButton = require('../../buttons/moderates/infractionButton.js');
const raitingButton = require('../../buttons/moderates/raitingButton.js');
const unRaitingButton = require('../../buttons/moderates/unraitingButton.js');

// 使用 Map 来存储活跃的面板收集器
// 键可以是 `${userId}-${channelId}`，值是 MessageComponentCollector 实例
const activePanelCollectors = new Map();

module.exports = {
  data: new SlashCommandBuilder()
    .setName('moderate')
    .setDescription('提供一个管理面板，包含禁言、解禁、警告等操作。'),
  async execute(interaction) {
    const member = interaction.member;
    const moderatorRole = member.roles.cache.find(r => r.name === 'Модератор');
    if (!moderatorRole) {
      return interaction.

理论要掌握，实操不能落！以上关于《Discord.js按钮收集器实用技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！