试图分配给只读属性

Question

first of all i get my redux array then in my_function copy that into new variable like below:

let transactions_list = useSelector(state => state.transactions_list.value);

let new_transactions_list = [...transactions_list];

when i want to change my new_transactions_list very deeply i got the error

const my_function = () => {

let new_transactions_list = [...transactions_list];
new_transactions_list[yearIndex].data_yearly[monthIndex].data_monthly.push(new_obj);
}

but when i define an array in class(without redux), it's work

Answer 1

Even if you are using the spreading [...transactions_list] , you are still only copying the first level of the array, which means that the object below that array is still the same one that redux uses.

You have 2 options:

This is how redux recommends you to update nested object link

function updateVeryNestedField(state, action) {
  return {
    ...state,
    first: {
      ...state.first,
      second: {
        ...state.first.second,
        [action.someId]: {
          ...state.first.second[action.someId],
          fourth: action.someValue
        }
      }
    }
  }
}

Or you can use something like immer , which will allow you to update your object even with immutable like this

const nextState = produce(baseState, draft => {
    draft[1].done = true
    draft.push({title: "Tweet about it"})
})

Either way, you will have to update your redux state afterward since this change will only be local in your code and not the global redux.