在 React 和 Redux 中的数组的数组中删除项目

Question

我在数组的数组中有一个项目，我想定位它并将其删除。我的问题是如何访问它并删除该特定项目而不改变它。

Codesandbox 在这里

case appConstants.DELETE_IMAGE_SUCCESS:
  return {
    ...state,
    products: state.productImages.filter((item) => item !== action.payload)
  };

Answer 1

您应该传递一个额外的负载 - product。这样我们就可以通过productCode在state.products数组中找到目标产品。假设ProductCode可以识别一个产品。

仅使用imageFileName无法判断属于哪个产品

case appConstants.DELETE_IMAGE_SUCCESS:
      console.log(state);
      const nState = {
        ...state,
        products: state.products.map((item) => {
          if (item.productCode !== action.payload.product.productCode)
            return item;
          return {
            ...item,
            productImages: item.productImages.filter(
              (v) => v.imageFileName !== action.payload.imageFileName
            )
          };
        })
      };
      console.log(nState);
      return nState;

App.js:

// ...
const onDeleteImage = (imageFileName, product) => {
    dispatch(deleteImage({ imageFileName, product }));
  };

  return (
    <div className="App">
      {(products || []).map((product, index) => (
        <ProductCard
          product={product}
          key={index}
          onDeleteImage={(imageFileName) =>
            onDeleteImage(imageFileName, product)
          }
        />
      ))}
    </div>
  );
// ...

CodeSandbox

Answer 2

这是概念性的解决方案：

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

注意：如果不止一个产品的图像与您要删除的图像具有相同的文件名，那么该图像也会从其他产品中删除。（目前这是对您的有效负载中提供的信息的限制。）如果该描述是您程序的错误，那么您还需要在有效负载中提供产品 ID，以便您只过滤匹配产品的图像。

Answer 3

您需要传递 productIndex 或 id 以及 imageFileName 才能正确执行删除。否则，所有具有相同 imageFileName 的产品将被删除。

试试这个

 case appConstants.DELETE_IMAGE_SUCCESS:
      return {
        ...state,
        products: (state.products || []).map((item, itemIndex) => {
          if (itemIndex === action.payload.productIndex) {
            return {
              ...item,
              productImages: item.productImages.filter(
                (image) => image.imageFileName !== action.payload.imageFileName
              )
            };
          }
          return item;
        })
      };

在App.js文件中

  const onDeleteImage = (productIndex, imageFileName) => {
    dispatch(deleteImage(productIndex, imageFileName));
  };

在操作中index.js文件

export const deleteImage = (productIndex, imageFileName) => {
  return {
    type: appConstants.DELETE_IMAGE_SUCCESS,
    payload: {
      productIndex,
      imageFileName
    }
  };
};

在MediaCard.js文件中

 <Button
          type="button"
          color="primary"
          variant="contained"
          onClick={() => onDeleteImage(productIndex, data.imageFileName)}
        >

代码沙箱 => https://codesandbox.io/s/redux-added-array-of-object-inside-another-aray-in-react-forked-xmghr?file=/src/reducers/productReducer.js

在 React 和 Redux 中的数组的数组中删除项目

Delete Item inside an Array of an Array in React and Redux

arrays

ecmascript-6

reactjs

redux