React：从数组中排除之前匹配的动物，而不破坏应用程序

Question

我正在构建一款快节奏的游戏，用户可以通过匹配来收集动物。游戏的工作原理如下：向用户呈现 2 种动物的 2 张图片，他们必须通过按 2 个按钮循环浏览图片，一个按钮更改顶部图片，另一个按钮更改底部图片。当顶部图片和底部图片匹配时，该动物就会被收集并放入用户的动物寓言中。

您可以在这里尝试：https://animal-snipet.web.app/

我正在尝试从

animalData

中过滤与用户捕获的动物相对应的数据，以便这些动物不会出现在下一场游戏中。理想情况下，下面的代码片段将推送一个由用户尚未捕获的动物组成的过滤数组，然后，在下一个游戏中，

animal data

将被分配给这个新数组。我对此进行编码的所有尝试都导致顶部和底部索引快速切换所有图片并破坏我的应用程序。

以下是相关代码片段 //单击按钮时执行的代码。有一个名为 voteTop 的相同函数，它反映了 voteBottom 的功能。

const voteBottom = debounce(() => {
    const newTopIndex = getNextIndex();
    setTopIndex(newTopIndex);
    if (newTopIndex === bottomIndex) {
      setMatch(true);
      const userId = localStorage.getItem("userId");
      const usersRef = ref(database, `/users/${userId}`);
      push(usersRef, {
        name: animalData[bottomIndex].name,
        img: animalData[bottomIndex].img,
      });
      const matchedAnimalsRef = ref(database, 'matchedAnimals');
      push(matchedAnimalsRef, {
        name: animalData[bottomIndex].name,
        img: animalData[bottomIndex].img,
        userId: userId,
      });
    } else {
      setMatch(false);
    }
  }, 300); 
  

Firebase 设置： 我使用 Firebase 来存储动物数据和匹配的动物。数据的结构如下：

• animalData

  数组：存储在Firebase实时数据库中的“unclaimed”节点下。

• matchedAnimals

  数组：存储在Firebase实时数据库中的“matchedAnimals”节点下。

我正在使用 Firebase SDK 读取数据并将数据写入这些节点。

预期行为： 游戏结束后，应从

animalData

数组中过滤掉之前匹配的动物，以便下一场游戏以一组新的动物开始。

Answer 1

我不知道你的对象是什么样子，但是，似乎你可以用 id 过滤可能匹配的卡片，并仍然保留它 O(1) 1 是动物的总列表