Javascript React组件不会随redux状态的更改而更新

我有此表单中的购物车数据

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,
  },
};

在reducer文件中，我有一个函数removietem，它正被reducer使用

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开发者工具中，更改有效，但组件视图没有更新。

将removeItem函数更改为以下代码

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

---

这是因为只有在引用发生更改时，组件才会得到更改。有关更多说明，请参阅链接

将removeItem函数更改为以下代码

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

---

这是因为只有在引用发生更改时，组件才会得到更改。您可以参考链接以获取更多解释

您需要创建购物车的副本，否则React将无法检测到更改，因为它会引用比较，并且您返回相同的对象。 试着用这种方法来做removietem

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
};

---

您需要创建购物车的副本，否则React将无法检测到更改，因为它会引用比较，并且您返回相同的对象。 试着用这种方法来做removietem

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
};

---

不改变redux状态，redux不会在对象中执行深度差异检查，当您不改变并创建新对象时，它会自动检测为不同的对象，因为它是普通的旧js对象

这将有助于进一步阅读：

所以你的removeItem方法应该是

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

---

您也可以使用库来执行此操作，例如，它已设置、删除、合并方法来执行相关操作，而无需更改对象。

不要更改redux状态，redux不会在对象中执行深度差异检查，当您不更改并创建新对象时，它会自动检测为不同的对象，因为它是普通的老js对象

这将有助于进一步阅读：

所以你的removeItem方法应该是

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

---

您也可以使用库来执行此操作，例如，它具有set、remove、merge方法来执行相关操作，而无需更改对象。

您的组件看起来像什么？您是如何将状态连接到组件道具的？您是否完全确定该项现在已从存储状态中丢失？您的组件是什么样子的？您是如何将状态连接到组件道具的？您是否完全确定该项目现在已从存储状态中丢失？谢谢。如何在一次单击中删除所有项目？只需发送空对象{}？谢谢。如何在一次单击中删除所有项目？只发送空对象{}？