Question

我有这种形式的购物车数据

const cart = {
  '1': {
    id: '1',
    image: '/rice.jpg',
    price: 32,
    product: 'Yellow Corn',
    quantity: 2,
  },
  '2': {
    id: '2',
    image: '/rice.jpg',
    price: 400,
    product: 'Beans',
    quantity: 5,
  },

  '3': {
    id: '3',
    image: '/rice.jpg',
    price: 32,
    product: 'Banana',
    quantity: 1,
  },
};

在化简器文件中，我有一个removeItem的函数，该函数正在被化简器使用

const removeItem = (items, id) => {
  items[id] && delete items[id];
  return items;
};

case REMOVE_ITEM: {
  const { cart } = state;
  const {
    payload: { id },
  } = action;

  return {
    ...state,
    cart: removeItem(cart, id),
  };
}

在组件中，我正在使用此handleRemove()处理删除操作

handleRemove = id => {
  const {
    actions: { removeItem },
  } = this.props;
  const payload = { id };
  removeItem(payload);
};

现在，在redux开发人员工具中，所做的更改正在有效地起作用，但是组件视图没有更新。

Answer 1

将removeItem函数更改为以下代码

const removeItem = (items, id) => {
    items[id] && delete items[id];
    return {...items};
};

这是因为仅当引用更改时组件才会更改。您可以参考this链接以获取更多说明

Answer 2

您需要创建购物车的副本，否则React不会检测到更改，因为它会进行引用比较，并且您返回相同的对象。尝试以这种方式进行removeItem()。

const removeItem = (items, id) => {
    let itemsClone = [...items]; // Copies all items into a brand new array
    itemsClone [id] && delete itemsClone [id]; // You perform the delete on the clone
    return itemsClone ; // you return the clone
};

Answer 3

请勿更改redux状态，redux不会对您的对象执行深度差异检查，当您不进行更改并创建新对象时，由于它是普通的旧js对象，因此会自动检测为另一个对象。

这将有助于进一步阅读：immutable-update-patterns

因此您的removeItem方法应该是

const removeItem = (items, id) => {
    let {[id]: remove, ...rest} = items
    return rest;
}

您还可以使用诸如dot-prop-immutable之类的库来执行此操作，该库具有set，remove，merge方法来执行相关操作而无需更改对象。

React组件不会随着Redux状态的更改而更新

3 个答案: