Select 并取消选择数组中的多个项目

Question

我这里有一段代码，其中有一个数组，其中可能有也可能没有键。当用户按下 'friend' 时，他们将他们添加到列表（数组）中，他们可以在其中开始与他们聊天（将 3 个朋友添加到数组中，然后开始聊天室）。用户 selected 可能被打开或关闭。

当前行为：我可以 add/remove 一个人，但我不能同时将多个人添加到数组中。当我添加一个人时，select另一个人 - 第一个人是'active'，当我删除第一个人时，第二个人自动变为活动

预期行为：我希望能够将多个人添加到数组中，然后从数组

中删除任何 selected 项

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];
    }
  }
}

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

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

Select 并取消选择数组中的多个项目

Select and deselect multiple items from array

javascript

arrays

logic

reactjs

react-native