从数组中选择和取消选择多个项目

Question

我在这里有一个 sn-p 代码，其中我有一个数组，其中可能有也可能没有键。当用户按下“朋友”时，他们会将他们添加到列表（数组）中，在那里他们可能会开始与他们聊天（将 3 个朋友添加到数组中，然后开始聊天室）。选择的用户可能会被打开或关闭。

当前行为： 我可以添加/删除一个人，但我不能同时将多个人添加到数组中。当我添加一个人时，选择另一个人 - 第一个人是“活跃的”，当我删除第一个人时，第二个人会自动成为活跃

预期行为： 我希望能够将多个人添加到数组中，然后从数组中删除任何选定的项目

onFriendChatPress = (key) => {
  console.log(key)               // this is my key 'JFOFK7483JFNRW'

 let friendsChat = this.state.friendsChat       // this is an empty array initially []

        if (friendsChat.length === 0) {
            friendsChat.push(key)
        } else {

            // there are friends/keys in the array  loop through all possible items in the array to determine if the key matches any of the keys 

            for (let i = 0; i < this.state.selGame.friends.length; i++) {
   
                // if the key matches, 'toggle' them out of the array

                if (friendsChat[i] === key) {
                    friendsChat = friendsChat.filter(function (a) { return a !== key })
                }
                else {
                   return friendsChat.indexOf(key) === -1 ? friendsChat.push(key) : 

                }

            }

        }

}

请帮忙！

Answer 1

根据您的代码，我对this.state.selGame.friends 和this.state.friendsChat 之间的区别感到非常困惑。也许我在你的解释中遗漏了一些东西。但是，我觉得您的代码对于相对简单的东西来说似乎有点过于复杂。这是我对这项任务的看法：

class Game {
  state = {
    friendsChat: [] as string[],
  };

  onFriendToggle(key: string) {
    const gameRoomMembers = this.state.friendsChat;

    if (gameRoomMembers.includes(key)) {
      this.state.friendsChat = gameRoomMembers.filter(
        (member) => member !== key
      );
    } else {
      this.state.friendsChat = [...gameRoomMembers, key];
    }
  }
}

我使用 typescript 是因为它使事情更容易查看，但您的 JS 代码可能也应该给您一个不错的类型推断。我追求的是可读性而不是性能，但是一旦你了解了这个过程，你就可以轻松地优化上面的脚本。

您应该可以根据我发送给您的内容进行调整以根据您的需要进行调整