score:2
the first approach you are mutating action.payload
directly since you are not creating a copy to newitem
but passing the same reference. given action.payload
is readonly you face the error:
// passing the same reference, 'newitem' points to 'action.payload'
// hence newitem is not copy
const newitem = action.payload
// here you mutate 'action.payload' since 'newitem' points to same reference
newitem.quantity = 1
state.items = [...state.items, newitem]
second approach works because you are creating a copy from action.payload
not mutating it:
// here 'newitem' still points to same reference 'action.payload'
const newitem = action.payload
// but here you are spreading the values into a new object, not mutating directly
state.items = [...state.items, { ...newitem, quantity: 1 }]
instead you should create a copy first to your approach to work:
// here you create a new object from 'action.payload''action.payload'
// hence newitem contains the same values but it's a different object
const newitem = { ...action.payload }
// now you are not mutating 'action.payload', only 'newitem' that's a new object
newitem.quantity = 1
state.items = [...state.items, newitem]
score:0
because when doing a like **kwargs with state in react i assume, you are passing a no nested state into one that has a nested state reassinging it to a non-nested stated breaking the goal of you're code.
score:1
action.payload
might be a readonly object. on the second code block, the spread operator passes the key-value pairs to the new object.
Source: stackoverflow.com
Related Query
- Travis/Jest: TypeError: Cannot assign to read only property 'Symbol(Symbol.toStringTag)' of object '#<process>'
- Uncaught TypeError: Cannot assign to read only property '' of object '#<Object>'
- TypeError: Cannot assign to read only property 'x' of object '#<Object>' React/JEST
- Unhandled Rejection (Error): Cannot assign to read only property 'getPosts' of object '#<Object>'
- typeError: Cannot assign to read only property 'paths' of object for compilerOptions in tsconfig
- ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Object>'
- TypeError: Cannot assign to read only property 'quantity' of object '#<Object>'
- How to solve a problem with Array.sort Cannot assign to read only property '0' of object
- ReactJs TypeError: Cannot assign to read only property 'name' of object '#<Object>'
- Cannot assign to read only property 'approved_by_customer_admin' of object '#<Object>' after updating the api data manually
- REACT- TypeError: Cannot assign to read only property 'color' of object
- How do I solve Cannot assign to read only property 'exports' of object in react?
- Cannot assign to read only property of Object in TypeScript
- Cannot assign to read only property 'exports' of object ERROR after upgrading to Babel 7
- Cannot assign to read only property of object '#<Object>'
- Cannot assign to read only property 'exports' of object '#<Object>' react and socket
- TypeError: Cannot assign to read only property 'item' of object '#<Object>'
- FCM React.js/Node npm: TypeError: Cannot assign to read only property 'toJSON' of object 'Error'
- CanvasJs React - Cannot assign to read only property 'exports' of object
- ReactJs: TypeError: Cannot assign to read only property 'cartHandler' of object '#<Object>'?
- Cannot assign to read only property 'backgroundColor' of object '#<Object>'
- Unhandled Rejection (TypeError): Cannot assign to read only property 'color' of object '#<Object>'
- TypeError: Cannot assign to read only property 'exports' of object '#<Object>' in ReactJS
- TypeError: Cannot assign to read only property 'x' of object '[object Array]'
- ReactJs - TypeError: Cannot assign to read only property 'name' of object '#<Object>'
- TypeError: Cannot assign to read only property 'statusKnown' of object '#<Object>'
- Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘
- TypeError: Cannot assign to read only property 'value' of object react after using the value of state in a function
- Redux-toolkit, React - Cannot assign to read only property '0' of object
- I am trying to update a property of an array of object but it is showing Cannot assign to read only property 'isSelected' of object
More Query from same tag
- React App: Map within HashRouter is having issues iterating the component
- TypeError: Cannot read property 'createEvent' of null React Apollo testing
- Dotenv-webpack in production?
- Megre results of one API call with another React.js Javascript
- Adding property to URL config
- How to pass value from child component(function based component )to parent component(class based component)
- lodash debounce in React functional component not working
- How to align labels and buttons inline and
- React, Javascript - Capture browser/tab close event
- How to add and remove add class for list in reactjs?
- How Does a React Snippet get Turned into Browser Javascript?
- Add a line break into the long string in <li> React
- I cannot use history.push() properly with ReactJS
- Read React Context value without subscription like Redux's store.getState()
- React add css class dynamically
- React state not setting Object from temporary variable
- Implementing Formik but cannot make the right connection using react
- Bing Map component in React
- Converting Class Component to Function Component
- How add lodash debounce to react input (func HandleChange)
- make antd table row only visible when clicked
- Identifying what item have been deleted (created and modifed) in a Formik FieldArray
- How do I debounce one function, will immediately invoking another function when using onChange in React?
- Why doesn't the redux state update?
- How to mock an object/function inside a module
- React & clsx: add a class name if the current item in a mapped array is the first of multiple items
- react-bootstrap-table misaligned header columns
- How to fix npm ERR! missing script: start in react
- <Fade> in material-ui just disables the visibility of the component . How to get the fade effect and actually hide the component ?
- TypeError: Cannot read property 'map' of undefined - how to access an array in a local json API