使用 Discord.js v13 交互后更改按钮样式答案

【问题标题】：Changing button style after interaction using Discord.js v13使用 Discord.js v13 交互后更改按钮样式
【发布时间】：2022-02-20 00:16:49
【问题描述】：

我正在尝试使用按钮制作剪刀石头布游戏，但是，我是 13v 的新手，这是我第一次使用按钮，我想在用户单击他们选择的按钮时制作它，该按钮变成绿色，也就是它的样式变成了“SUCCESS”，但它没有在 Discord API 上更新，似乎样式不是只读的，所以有人知道为什么会这样吗？

我的代码：


const db = require('quick.db')
const { MessageEmbed, MessageButton, MessageActionRow } = require('discord.js')
const { BOT_PREFIX } = require('../config')
const commandName = 'rockpaperscissor'


module.exports = client => {
    client.on('messageCreate', async message => {
        if (message.author.bot) return
        if (!message.content.startsWith(BOT_PREFIX)) return

        const command = message.content.split(' ')
        const args = message.content.substring(1).split(' ')

        if (command.toString().toLowerCase().replace(BOT_PREFIX, '').startsWith(commandName) || command.toString().toLowerCase().replace(BOT_PREFIX, '').startsWith('rps')) {
            const buttonRow1 = new MessageActionRow().addComponents(
                new MessageButton()
                .setCustomId('rock-RPS')
                .setLabel('ROCK')
                .setStyle('SECONDARY')
                .setDisabled(false),
                new MessageButton()
                .setCustomId('paper-RPS')
                .setLabel('PAPER')
                .setStyle('SECONDARY')
                .setDisabled(false),
                new MessageButton()
                .setCustomId('scissors-RPS')
                .setLabel('SCISSORS')
                .setStyle('SECONDARY')
                .setDisabled(false)
            )
            
            const filter = (interaction) => {
                if (!interaction.isButton) return
                if (interaction.customId.includes('-RPS'))
                if (interaction.user.id === message.author.id) return true;
                interaction.reply({ content: 'This game isn\'t for you.' })
            }

            const collector = message.channel.createMessageComponentCollector({
                filter,
                max: 1,
            })

            message.reply({ content: 'Testing!', components: [buttonRow1] })
      
            const choices = ['Rock', 'Paper', 'Scissors']
            let botChoice = choices[Math.floor(Math.random() * choices.length)];

            let userBalance =  parseInt(await db.fetch(`${message.author.id}.balance`))
            if (userBalance == null) await db.set(`${message.author.id}.balance`, 0)
            function randomNumber(min, max) {
                return Math.floor(Math.random() * (max - min+1)+min);   
            }
            let reward1 = randomNumber(153, 535)
            let reward2 = randomNumber(553, 1460)
    
            collector.on('end', async (buttonInteraction) => {
                const interaction = buttonInteraction.first();
                const success = new MessageButton(buttonInteraction.component).setStyle("SUCCESS");
                await interaction.deferReply({
                    ephemeral: false
                })
                interaction.reply('Please wait...')
                if (interaction.customId == 'rock-RPS') {
                    interaction.update({ components: [new MessageActionRow().addComponents(
                        new MessageButton()
                        .setCustomId('rock-RPS')
                        .setLabel('ROCK')
                        .setStyle('SUCCESS')
                        .setDisabled(true),
                        new MessageButton()
                        .setCustomId('paper-RPS')
                        .setLabel('PAPER')
                        .setStyle('SECONDARY')
                        .setDisabled(true),
                        new MessageButton()
                        .setCustomId('scissors-RPS')
                        .setLabel('SCISSORS')
                        .setStyle('SECONDARY')
                        .setDisabled(true))] 
                    })
                } else if (interaction.customId == 'paper-RPS') {
                    interaction.update({ components: [new MessageActionRow().addComponents(
                        new MessageButton()
                        .setCustomId('rock-RPS')
                        .setLabel('ROCK')
                        .setStyle('SECONDARY')
                        .setDisabled(true),
                        new MessageButton()
                        .setCustomId('paper-RPS')
                        .setLabel('PAPER')
                        .setStyle('SUCCESS')
                        .setDisabled(true),
                        new MessageButton()
                        .setCustomId('scissors-RPS')
                        .setLabel('SCISSORS')
                        .setStyle('SECONDARY')
                        .setDisabled(true))] 
                    })
                } else if (interaction.customId == 'scissors-RPS') {
                    interaction.update({ components: [new MessageActionRow().addComponents(
                        new MessageButton()
                        .setCustomId('rock-RPS')
                        .setLabel('ROCK')
                        .setStyle('SECONDARY')
                        .setDisabled(true),
                        new MessageButton()
                        .setCustomId('paper-RPS')
                        .setLabel('PAPER')
                        .setStyle('SECONDARY')
                        .setDisabled(true),
                        new MessageButton()
                        .setCustomId('scissors-RPS')
                        .setLabel('SCISSORS')
                        .setStyle('SUCCESS')
                        .setDisabled(true))] 
                    })
                }
                if (interaction.customId == 'rock-RPS') {
                    if (botChoice == 'Rock') {
                        interaction.editReply({ content: `I chose Rock too, so it's a tie!\nYou got \`$${reward1}\` as a small reward.`})
                        await db.set(`${interaction.user.id}.balance`, userBalance + reward1)
                    } else if (botChoice == 'Paper') {
                        interaction.editReply({ content: `I chose Paper, so I win!`})
                    } else if (botChoice == 'Scissors') {
                        interaction.editReply({ content: `I chose Scissors, so you win!\nYou got \`$${reward2}\` as an award!`})
                        await db.set(`${interaction.user.id}.balance`, userBalance + reward2)
                    }
                } else if (interaction.customId == 'paper-RPS') {
                    if (botChoice == 'Rock') {
                        interaction.editReply({ content: `I chose Rock, so you win!\nYou got \`$${reward2}\` as an award!`})
                        await db.set(`${interaction.user.id}.balance`, userBalance + reward2)
                    } else if (botChoice == 'Paper') {
                        interaction.editReply({ content: `I chose Paper too, so it's a tie!\nYou got \`$${reward1}\` as a small reward.`})
                        await db.set(`${interaction.user.id}.balance`, userBalance + reward1)
                    } else if (botChoice == 'Scissors') {
                        interaction.editReply({ content: `I chose Scissors, so I win!`})
                    }
                } else if (interaction.customId == 'scissors-RPS') {
                    if (botChoice == 'Rock') {
                        interaction.editReply({ content: `I chose Rock, so I win!`})
                    } else if (botChoice == 'Paper') {
                        interaction.editReply({ content: `I chose Paper, so you win!\nYou got \`$${reward2}\` as an award!`})
                        await db.set(`${interaction.user.id}.balance`, userBalance + reward2)
                    } else if (botChoice == 'Scissors') {
                        interaction.editReply({ content: `I chose Scissors too, so it's a tie!\nYou got \`$${reward1}\` as a small reward.`})
                        await db.set(`${interaction.user.id}.balance`, userBalance + reward1)
                    }
                }
            })
        }
    })
}

【问题讨论】：

标签： javascript node.js discord.js

【解决方案1】：

我更新了我的答案，以便对您的原始问题进行有效更正。由于显而易见的原因，我将 db 行注释掉了。您只需将新代码复制到bot PAPER 和 SCISSORS 选项中。

client.on('messageCreate', async message => {
    if (message.content === "!rps") {
        const buttonRow1 = new MessageActionRow().addComponents(
            new MessageButton()
                .setCustomId('rock-RPS')
                .setLabel('ROCK')
                .setStyle('SECONDARY')
                .setDisabled(false),
            new MessageButton()
                .setCustomId('paper-RPS')
                .setLabel('PAPER')
                .setStyle('SECONDARY')
                .setDisabled(false),
            new MessageButton()
                .setCustomId('scissors-RPS')
                .setLabel('SCISSORS')
                .setStyle('SECONDARY')
                .setDisabled(false)
        )
            
        const filter = (interaction) => {
            if (!interaction.isButton) return
            if (interaction.customId.includes('-RPS'))
            if (interaction.user.id === message.author.id) return true;
            
            interaction.reply({ content: 'This game isn\'t for you.' })
        }

        const collector = message.channel.createMessageComponentCollector({
            filter,
            max: 1,
        })

        // ******** CHANGE THIS LINE FROM .reply TO .send; ADD await to all sends/replies ********
        await message.channel.send({ embeds: [new MessageEmbed().setTitle('Let\'s Play!')], components: [buttonRow1] })
      
        const choices = ['Rock', 'Paper', 'Scissors']
            
        let botChoice = choices[Math.floor(Math.random() * choices.length)];

        // let userBalance =  parseInt(await db.fetch(`${message.author.id}.balance`))
            
        // if (userBalance == null) await db.set(`${message.author.id}.balance`, 0)
        
        function randomNumber(min, max) {
            return Math.floor(Math.random() * (max - min+1)+min);   
        }
        
        let reward1 = randomNumber(153, 535)
        let reward2 = randomNumber(553, 1460)

        collector.on('end', async (buttonInteraction) => {
            const interaction = buttonInteraction.first();
            const success = new MessageButton(buttonInteraction.component).setStyle("SUCCESS");
            
            if (interaction.customId == 'rock-RPS') {
                await interaction.update({ components: [new MessageActionRow().addComponents(
                    new MessageButton()
                        .setCustomId('rock-RPS')
                        .setLabel('ROCK')
                        .setStyle('SUCCESS')
                        .setDisabled(true),
                    new MessageButton()
                        .setCustomId('paper-RPS')
                        .setLabel('PAPER')
                        .setStyle('SECONDARY')
                        .setDisabled(true),
                    new MessageButton()
                        .setCustomId('scissors-RPS')
                        .setLabel('SCISSORS')
                        .setStyle('SECONDARY')
                        .setDisabled(true))] 
                })
            } else if (interaction.customId == 'paper-RPS') {
                await interaction.update({ components: [new MessageActionRow().addComponents(
                    new MessageButton()
                        .setCustomId('rock-RPS')
                        .setLabel('ROCK')
                        .setStyle('SECONDARY')
                        .setDisabled(true),
                    new MessageButton()
                        .setCustomId('paper-RPS')
                        .setLabel('PAPER')
                        .setStyle('SUCCESS')
                        .setDisabled(true),
                    new MessageButton()
                        .setCustomId('scissors-RPS')
                        .setLabel('SCISSORS')
                        .setStyle('SECONDARY')
                        .setDisabled(true))] 
                })
            } else if (interaction.customId == 'scissors-RPS') {
                await interaction.update({ components: [new MessageActionRow().addComponents(
                    new MessageButton()
                        .setCustomId('rock-RPS')
                        .setLabel('ROCK')
                        .setStyle('SECONDARY')
                        .setDisabled(true),
                    new MessageButton()
                        .setCustomId('paper-RPS')
                        .setLabel('PAPER')
                        .setStyle('SECONDARY')
                        .setDisabled(true),
                    new MessageButton()
                        .setCustomId('scissors-RPS')
                        .setLabel('SCISSORS')
                        .setStyle('SUCCESS')
                        .setDisabled(true))] 
                })
            }
            
            if (interaction.customId == 'rock-RPS') {
                if (botChoice == 'Rock') {
                    // ******** ADDED INDIVIDUAL STATES; DO FOR PAPER AND SCISSORS; THIS CAN BE GREATLY IMPROVED BUT IT GETS YOU GOING ********
                    const tie = new MessageActionRow().addComponents(
                        new MessageButton()
                            .setCustomId('rock-RPS')
                            .setLabel('ROCK')
                            .setStyle('PRIMARY')
                            .setDisabled(true));
                    
                    await interaction.editReply({ content: `I chose Rock too, so it's a tie!\nYou got \`$${reward1}\` as a small reward.`, components: [tie]})
                    
                    // await db.set(`${interaction.user.id}.balance`, userBalance + reward1)
                } else if (botChoice == 'Paper') {
                    const lose = new MessageActionRow().addComponents(
                        new MessageButton()
                            .setCustomId('rock-RPS')
                            .setLabel('ROCK')
                            .setStyle('DANGER')
                            .setDisabled(true));
                            
                    await interaction.editReply({ content: `I chose Paper, so I win!`, components: [lose]})
                } else if (botChoice == 'Scissors') {
                    const win = new MessageActionRow().addComponents(
                        new MessageButton()
                            .setCustomId('rock-RPS')
                            .setLabel('ROCK')
                            .setStyle('SUCCESS')
                            .setDisabled(true));
                            
                    await interaction.editReply({ content: `I chose Scissors, so you win!\nYou got \`$${reward2}\` as an award!`, components: [win]})
                    
                    // await db.set(`${interaction.user.id}.balance`, userBalance + reward2)
                }
            } else if (interaction.customId == 'paper-RPS') {
                if (botChoice == 'Rock') {
                    await interaction.editReply({ content: `I chose Rock, so you win!\nYou got \`$${reward2}\` as an award!`})
                    
                    // await db.set(`${interaction.user.id}.balance`, userBalance + reward2)
                } else if (botChoice == 'Paper') {
                    await interaction.editReply({ content: `I chose Paper too, so it's a tie!\nYou got \`$${reward1}\` as a small reward.`})
                    
                    // await db.set(`${interaction.user.id}.balance`, userBalance + reward1)
                } else if (botChoice == 'Scissors') {
                    await interaction.editReply({ content: `I chose Scissors, so I win!`})
                }
            } else if (interaction.customId == 'scissors-RPS') {
                if (botChoice == 'Rock') {
                    await interaction.editReply({ content: `I chose Rock, so I win!`})
                } else if (botChoice == 'Paper') {
                    await interaction.editReply({ content: `I chose Paper, so you win!\nYou got \`$${reward2}\` as an award!`})
                    
                    // await db.set(`${interaction.user.id}.balance`, userBalance + reward2)
                } else if (botChoice == 'Scissors') {
                    await interaction.editReply({ content: `I chose Scissors too, so it's a tie!\nYou got \`$${reward1}\` as a small reward.`})
                    
                    // await db.set(`${interaction.user.id}.balance`, userBalance + reward1)
                }
            }
        })
                // }
            // })
        // }
    }
});

【讨论】：

我更改了代码以修复一些错误
但是，当我尝试您的方式时，它会出错... { 对此交互的回复已发送或延迟。} 或 {交互已被确认。} 如果我删除推迟并将editReply 更改为reply
好吧，如果你也有办法让我也禁用它们就好了。
对不起，再次更新，我只是收到错误{此交互的回复已发送或延迟。}
嗯，这确实很奇怪，因为我将您的代码完全复制到了我的机器人中并且它运行得很好（显然删除了 db 调用）。这是一个link，可以将我的机器人添加到你的服务器，如果你想试试？它所包含的只是您的代码。另一件事，我没有使用module.exports，只是一个常规的client.on('messageCreate') 事件。尽可能简单。我认为这并不重要，但是您运行的是哪个版本的 discord.js？