如何根据 url ID 映射元素？

Question

假设我有一组看起来像的对象

[{

details:

   {id: 7},

type: minigame1,

...(blabla some other values that i'll have to access later)

},

{

details:

  {id: 8},

type: minigame1,

...(blabla some other values that i'll have to access later)

},

{

details:

  {id: 10},

type: minigame2,

...

}]

现在，到我的组件的链接基于这些值，假设我选择了第一个迷你游戏，我被路由到 localhost/minigame1/7

该链接有效，尽管我只是想出了一个临时解决方案，以实际获取特定的、选定的迷你游戏数据。

if (taskData !== '') {

    minigameData = taskData

      .filter(t => t.type === 'minigame1')

      .map(el => {

        questionsData = el;

      });

  }

这虽然忽略了 id 并且只为它可以找到的第一个游戏（id 7）提取数据，即使我选择了 id 8 的游戏。所以我尝试使用 good ol

let { id } = useParams();

我的问题是，我不确定如何让它通过 id 和游戏类型过滤游戏数据。

我试过添加另一个

.filter(t => t.details.id === id) 

在第一个之后，但它只会导致我的数据根本无法加载，无论链接 ID 是什么。

我刚刚花了很多时间试图找出一个解决方案，但我的想法已经用完了。

将不胜感激任何建议！

Answer 1

.filter返回符合条件的所有元素的数组。但是，当您确实需要匹配typeAND时，您只使用 1 个字段details.id。您需要做的就是将第二个条件添加到您的退货声明中。但是，对于您的用例，我认为这.find将是一个更好的选择。它没有返回所有选择的数组，而是只返回它找到的第一个（因为 minigame + id 应该是唯一的，对吧？），所以我在下面更新了你的逻辑。if (taskData !== '') {    minigameData = taskData      .find(t => t.type === 'minigame1' && t.details.id === id);  }最后，我.map最后删除了你的，因为它什么也没做。你最后没有返回值，所以我不确定最终结果会是什么。如果t.details.id不匹配任何东西，我会检查你params返回的是什么。