Question

我正在从招摇的宠物API中获取宠物列表。我想删除具有重复ID的宠物，然后将其发送到React以避免重复密钥问题。我尝试了下面的代码，但对我不起作用。有人可以帮我吗？

我是RxJS的新手，所以想删除注释的代码，该代码根据宠物的ID过滤不同的对象。

export function fetchPetEpic(action$) {
    return action$.pipe(
        ofType('GET_PETS'),
        switchMap(action => 
            ajax.getJSON(`https://petstore.swagger.io/v2/pet/findByStatus?status=${action.payload}`).pipe(
                map( response => response.map( (pet) => ({
                    id: pet.id,
                    pet: pet.pet
                }))),
                distinct( petList => petList.id),
                // map( petList => petList.filter((pet, index, list) => {
                //                     return list.map(petObj =>
                //                         petObj.id).indexOf(pet.id) === index;
                //                     })),
                map(response => petActions.setPets(response))
        )),
        catchError( error => ({ type: 'ERROR_PETS_FETCH', payload: error})),
    )
}

假设pets数组类似于[ {id：1，宠物：狗}，{id：2，宠物：猫}，{id：3，宠物：鱼}，{id：2，宠物：大鼠}，{id：4，宠物：鹦鹉}， {id：1，宠物：猫头鹰} ]

预期输出：[{id：1，pet：dog}，{id：2，pet：cat}，{id：3，pet：fish}，{id：4，pet：parrot}]

我得到的输出与输入的数组相同。

Answer 1

getJSON函数将返回一个可观察对象，该对象发出一个项目（响应）并完成。（或者，它可能会发出一个错误。）给出了返回数组的快乐路径示例……

以下map运算符将接收反序列化的JSON数组并将其映射到新数组。也就是说，map运算符将只有一个输入事件，并导致只有一个输出事件。

map(response => response.map(pet => ({
  id: pet.id,
  name: pet.name,
  status: pet.status,
}))),

distinct运算符可跨多个事件使用。对于每个事件，它都会过滤出所有重复项（如您所述，重复项的定义可自定义）。以下distinct运算符将始终通过您的 single 事件。另外，请注意petList是一个 array 。数组没有id属性，因此lambda将返回undefined。不过，lambda返回什么并不重要。因为只有一个事件，所以在任何比较中都没有使用返回值。

distinct(petList => petList.id),

您似乎期望distinct处理数组的每个元素。为此，可以使用from将数组转换为可观察的数组，并使用concatMap依次发出每个元素。通过管道中发生多个事件，distinct可以发挥其魔力：

...
concatMap(from), // shorthand for: `concatMap(response => from(response)),`
map(pet => ({
  id: pet.id,
  name: pet.name,
  status: pet.status,
})),
distinct(pet => pet.id),
...

但是，此更改将导致发出多个Redux动作（每个不同的宠物一个）。在发出Redux操作之前，我们可以使用reduce运算符将每个不同的宠物累积回到单个数组中。

...
reduce((pets, pet) => [...pets, pet], []),
map(pets => petActions.setPets(pets)),
...

让我们把它们放在一起：

export function fetchPetEpic(action$) {
  return action$.pipe(
    ofType('GET_PETS'),
    switchMap(action =>
      ajax.getJSON(`https://petstore.swagger.io/v2/pet/findByStatus?status=${action.payload}`).pipe(
        concatMap(from), // shorthand for: `concatMap(response => from(response)),`
        map(pet => ({
          id: pet.id,
          name: pet.name,
          status: pet.status,
        })),
        distinct(pet => pet.id),
        reduce((pets, pet) => [...pets, pet], []),
        map(pets => petActions.setPets(pets)),
        catchError(error => ({ type: 'ERROR_PETS_FETCH', payload: error })),
      )
    ),
  )
}

最后一个注意事项：在您提供的示例数据和您正在应用的map之间看起来有些不一样。如果数组如下所示：

[{id：1，pet：dog}，...

然后，每个元素都没有name或status属性，只有id和pet属性。可能是出于以下目的？

map(item => ({
  id: item.id,
  name: item.pet.name,
  status: item.pet.status,
})),

或者也许这只是您提供的示例数据的问题。无论哪种方式，我都建议您仔细检查地图，以确保它能按预期投影您的值。

如何将distinct（）应用于对象数组RxJS？

1 个答案: