React Native中如何在Reducer里移除数组单个指定ID重复元素

嘿，我懂你的困扰——现在你的代码里用filter方法会把所有id匹配的元素都过滤掉，这就是为啥所有movement-two都被一次性删掉了。要实现只移除第一个匹配的重复元素，我们得换个思路：精准定位到第一个目标元素的位置，然后单独把它从数组中移除，同时保留其他元素（包括剩下的重复项）。

先看看你原来的代码：

case REMOVE_MOVEMENT: 
  return { 
    ...state, 
    selectedTrainerMovements: state.selectedTrainerMovements.filter( 
      movement => { 
        return movement.id !== action.movement.id; 
        // return state.selectedTrainerMovements.splice( 
        // state.selectedTrainerMovements.indexOf(movement) 
        // ); 
      }, 
      state.selectedTrainerMovements.indexOf(action.movement), 
    ) 
  }; 
break;

问题出在filter上：它会遍历整个数组，把所有满足movement.id !== action.movement.id的元素留下来，换句话说就是把所有id匹配的元素都去掉了，这显然不是你想要的。

解决方案代码 #

下面是修改后的reducer代码，能实现只移除第一个匹配的元素：

case REMOVE_MOVEMENT:
  // 找到第一个id匹配的元素的索引
  const targetIndex = state.selectedTrainerMovements.findIndex(
    movement => movement.id === action.movement.id
  );

  // 如果找到了目标元素
  if (targetIndex !== -1) {
    return {
      ...state,
      selectedTrainerMovements: [
        // 保留索引之前的所有元素
        ...state.selectedTrainerMovements.slice(0, targetIndex),
        // 保留索引之后的所有元素（跳过当前匹配的那个）
        ...state.selectedTrainerMovements.slice(targetIndex + 1)
      ]
    };
  }

  // 没找到匹配元素时，直接返回原状态
  return state;
break;

代码解释 #

1. findIndex：这个方法会遍历数组，返回第一个满足条件的元素的索引；如果没找到，返回-1。这样我们就能精准定位到要移除的第一个movement-two的位置。
2. 不可变性处理：我们用slice方法来拆分数组，slice不会修改原数组，而是返回新的子数组。然后通过展开运算符把前后两部分合并成新数组，符合Redux reducer对状态不可变性的要求（绝对不能直接修改原state）。
3. 边界处理：如果没找到匹配的元素，直接返回原状态，避免不必要的状态更新。

这样修改后，当你传入movement-two的id时，就只会移除数组里第一个出现的movement-two，剩下的重复项会被保留下来。

内容的提问来源于stack exchange，提问作者Shashika Virajh