如何根据 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 ollet { 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返回的是什么。