在 Redux 中删除嵌套数组中的匹配 ID

Question

我有一个设置了一些静态数据的删除按钮。在其中我传递了一些ID。单击按钮时应删除匹配的 ID。我的问题是我无法删除与其 ID 匹配的任何项目。

Codesandbox 在这里CLICK HERE

case appConstants.DELETE_IMAGE_SUCCESS:
  return {
    ...state,
    products: state.products.map((product) => ({
      ...product,
      productImages: (product.productImages ?? []).filter(
        ({ id }) => !id.includes(action.payload)
      )
    }))
  };

Answer 1

问题出在过滤功能上 - 您混淆了 String.prototype.includes 和 Array.prototype.includes。

正确的做法是检查 action.payload 中的 productImage.id，反之亦然：

case appConstants.DELETE_IMAGE_SUCCESS:
  return {
    ...state,
    products: state.products.map((product) => ({
      ...product,
      productImages: (product.productImages ?? []).filter(
        ({ id }) => !action.payload.includes(id)
      )
    }))
  };

String.prototype.includes and Array.prototype.includes 以类似的方式工作，但具有不同的 API - 首先接受 string 作为参数，其次 - Array.

在 Redux 中删除嵌套数组中的匹配 ID

Delete Matched Id in Nested Array in Redux

ecmascript-6

reactjs

redux

react-hooks