在 React 中更新的道具没有调度答案

【问题标题】：Props updated without dispatching in React在 React 中更新的道具没有调度
【发布时间】：2018-09-08 23:10:07
【问题描述】：

“反应”：“^16.4.1”， “反应域”：“^16.4.2”， "react-redux": "^5.0.7", "redux": "^4.0.0", "redux-thunk": "^2.3.0", "webpack-dev-server": "^3.1.5"

const items = this.props.cart.cartItems;
const index = items.indexOf(item1);
items.splice(index, 1);
this.setState({ finalPrice: 0 });

在这种情况下，道具 'cartItems' 会更新为变量 'items' 而无需调度操作。

【问题讨论】：

只需将第一行更改为const items = { ...this.props.cart.cartItems };。它应该可以解决您的问题

标签： javascript reactjs redux

【解决方案1】：

这是因为您正在更改从另一个对象复制的对象的对象属性，而无需进行深度复制。因此，当您更改嵌套属性时，它也会更改原始对象。您要么进行深层复制，要么更改对象而不改变它们。

将一个对象分配给另一个对象不会创建完全不同的对象，除非您执行深层复制。两个对象引用指向同一个对象。
splice 改变原始数组。使用slice 或其他一些方法，例如filter。

const cart = {
  cartItems: [
    "foo", "bar", "baz"
  ],
}

console.log( "original one before update", cart.cartItems );

const index = cart.cartItems.indexOf("foo");
const items = cart.cartItems.filter( (_, i) => i !== index );

console.log( "original one after update", cart.cartItems );
console.log( "new items", items );

【讨论】：