如何在React的componentDidUpdate中获取Redux删除操作的目标图层id

你当前拿不到删除id的原因是removeActiveLayer只是触发删除操作的函数，本身不会存储传入的id参数，你可以通过以下两种方案实现需求：

方案1：在Redux Store中新增字段存储最近删除的图层id（推荐全局多组件需要该值时使用） #

• 第一步：修改reducer的初始状态，新增lastRemovedLayerId字段，同时修改REMOVE_ACTIVE_LAYER的处理逻辑同步更新该字段：

// 示例初始state
const initialState = {
  activeLayers: [],
  lastRemovedLayerId: null,
  // 其余原有state字段保留
}

// 修改REMOVE_ACTIVE_LAYER分支逻辑
case REMOVE_ACTIVE_LAYER:
  return {
    ...state,
    activeLayers: state.activeLayers.filter((l) => action.payload !== l.id),
    lastRemovedLayerId: action.payload
  };

• 第二步：在Layers.js的mapStateToProps中将该字段映射到组件props，注意将下方你的reducer命名替换为你项目中对应reducer的实际命名：

const mapStateToProps = (state) => ({
  // 其余原有映射字段保留
  lastRemovedLayerId: state.你的reducer命名.lastRemovedLayerId
})
// connect部分保持原有逻辑，只需要补充上面的映射即可

• 第三步：修改componentDidUpdate逻辑，对比前后props的lastRemovedLayerId差异拿到删除id：

componentDidUpdate(prevProps, prevState) {
  if (this.props.lastRemovedLayerId !== prevProps.lastRemovedLayerId) {
    const removedLayerId = this.props.lastRemovedLayerId;
    console.log('被删除的图层id：', removedLayerId);
    // 此处写你需要的后续处理逻辑
  }
}

方案2：对比前后激活图层数组差异计算删除id（推荐仅单个组件需要该值时使用） #

如果你的项目不需要全局存储最近删除的id，且Layers.js已经通过props拿到了activeLayers数组，可以直接在生命周期中对比前后数组的差异，找出被删除的id：

componentDidUpdate(prevProps, prevState) {
  const prevLayerIds = prevProps.activeLayers.map(layer => layer.id);
  const currentLayerIds = this.props.activeLayers.map(layer => layer.id);
  // 筛选出之前存在、当前不存在的id，即为被删除的图层id
  const removedLayerId = prevLayerIds.find(id => !currentLayerIds.includes(id));
  if (removedLayerId !== undefined) {
    console.log('被删除的图层id：', removedLayerId);
    // 此处写你需要的后续处理逻辑
  }
}

内容的提问来源于stack exchange，提问作者Tek Kshetri