在React中不分派的情况下更新道具

Question

"react": "^16.4.1", "react-dom": "^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 });

In this scenario, the props 'cartItems' is updated to variable 'items' without dispatching action.

Answer 1

This is because you are mutating an object property of an object which is copied from another one without doing a deep copy. So, when you mutate a nested property, it also changes the original object. Either you make a deep copy or change the objects without mutating them.

• Assigning one object into another one do not create a totally different object unless you do a deep copy. Both objects references point the same object.

• splice mutates the original array. Either use slice or some other methods like 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 );