0

So far as I've understood when I clone an array it gets immutable if I apply any action over its clone. Like here, for example:

const test = () => {
    let array = [1,2,3,4]
    let spreadArray = [...array]

    spreadArray.forEach((item, i) => spreadArray[i] = 'changed')

    console.log(array)
    console.log(spreadArray)
}
<button>TEST</button>

As can be seen it works fine.

However I am trying to do that in ReactJs with a props that I am receiving as an array from Redux, I apply forEach over the clone array, but when I log the results I can see that both arrays have been changed.

My array is something like that:

const productsData = [
    {
        id: 1,
        nome: 'Produto 1',
        qtde: 10,
        valor: 12.00
    },
    {
        id: 2,
        nome: 'Produto 2',
        qtde: 100,
        valor: 12.00
    },
    {
        id: 3,
        nome: 'Produto 3',
        qtde: 90,
        valor: 13.00
    },
    {
        id: 4,
        nome: 'Produto 4',
        qtde: 100,
        valor: 12.00
    },
    {
        id: 5,
        nome: 'Produto 5',
        qtde: 80,
        valor: 12.50
    },
]

This what I am doing:

updateQtdeHandler = (arg, id) => {

        let productsList = [...this.props.productsList]
        
        productsList.forEach((product, i) => {
            if (product.id === id) {
                if (arg === 'up') {
                    productsList[i].qtde = product.qtde+1
                    productsList[i].valorTotal = product.qtde * product.valor
                }

                if (arg === 'down') {
                    productsList[i].qtde = product.qtde-1
                    productsList[i].valorTotal = product.qtde * product.valor
                }

            }
        })

        console.log(productsList) // CLONE
        console.log(this.props.productsList) // ORIGINAL ARRAY
        //BOTH ARRAYS ARE BEING CHANGED
    }

I am receiving the array here:

const mapStateToProps = state => {
    return {
        productsList: state.productsDataState
    }
}

enter image description here

Every place I looked support my understanding and I just don't get it.

What am I doing wrong here?

Or did I get something wrong and this actually should be the correct behavior when using redux?

Berg_Durden
  • 1,531
  • 4
  • 24
  • 46
  • 2
    Nested objects aren't cloned by the spread operator, nor by slice(); – pilchard Jan 18 '21 at 18:17
  • @pilchard So, the reference to the nested objects is kept? – Berg_Durden Jan 18 '21 at 18:18
  • 1
    Yes, that's correct. see: [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) – pilchard Jan 18 '21 at 18:20
  • [here](https://gist.github.com/3limin4t0r/cf1abeea1fc8abbcb4eec338f38db1ae) is an example using `map` to create a copy of the array, then the spread operator to create a copy of the object. – 3limin4t0r Jan 18 '21 at 20:03

0 Answers0