React Push One State Array into Another

Question

In essence, I have this working, I am building out a game component to allow users to select items they want to purchase, they get pushed into a pending array and then when they wish to check out I am pushing those objects from the pending array into the purchased array.

But something very odd is happening after that, the arrays look like it worked properly the pending array is empty and the purchased array has the correct items within it. The problem comes once I try and click a new item to put into the pending array if its the same item that is in the purchased array it alters the counter there.

I have been toying with different ways to try and fix this, but have no idea how it's affecting the purchased array without me setting the state again.

This is my code so far for operating this vendor functionality.

handleMerchantEquipment(item) {
    let pending = this.state.merchantPending;
    let found = Equipment.find(el => item === el.Name);
    let check = pending.find(el => el.Name === found.Name);
    if (!check) {
        pending.push(found);
    }
    else {
        var foundIndex = pending.findIndex(el => el.Name === check.Name);
        check.Count +=1;
        pending[foundIndex] = check;

    }
    let CP = [0];
    let SP = [0];
    let GP = [0];
    let PP = [0];
    pending.map(item => {
        let cost = item.Cost * item.Count;
        if (item.Currency === "CP") {
            CP.push(cost);
        }
        else if (item.Currency === "SP") {
            SP.push(cost);
        }
        else if (item.Currency === "GP") {
            GP.push(cost);
        }
        else if (item.Currency === "PP") {
            PP.push(cost);
        }
    });

let purchased = [];
        this.state.merchantPending.map(item => {
            purchased.push(item)
        });
this.setState({
            yourCP: totalCP,
            yourSP: totalSP,
            yourEP: totalEP,
            yourGP: totalGP,
            yourPP: totalPP,
            purchased: purchased,
            merchantPending: [],

        });

Some of the code is related to the currency exchange which his working fine.

I have also tried the ... to update the array but the issue persisted with it updating the Count in the purchased state.

Dinesh Pandiyan · Accepted Answer · 2018-12-08 17:22:58Z

1

You are mutating state. You should not mutate state in React. You should always immutably change state in React.

I think the problem lies in this line.

let pending = this.state.merchantPending;

Change it to

let pending = [...this.state.merchantPending.map(obj => ({...obj}))];

Also, if you want to iterate an array, use forEach instead of map. map returns you a new array.

pending.forEach(item => {
  ...
}

edited Dec 8, 2018 at 17:22

answered Dec 8, 2018 at 15:58

Dinesh Pandiyan

6,3393 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Austin Over a year ago

I tried changing the pending to how you said to try and even changed it to forEach instead of .map but it is still changing the count on both arrays. The part I am quite unsure of is the best way to move the objects from the one array to the other, is there a specific way I should be doing that?

Dinesh Pandiyan Over a year ago

It's because of shallow copying array entries. I have updated the answer to deep copy up to one level. It should work for you now.

Austin Over a year ago

That did the trick! Thank you very much I was really running out of ideas of how to handle this.

Bens Steves · Accepted Answer · 2018-12-08 15:44:19Z

0

What is that you want the purchasedArray to do when it encounters a duplicate entry or item? May you clarify that in your question?

If you want it to not allow duplicate items you have to first check the array to see if it contains that item. Pseudo code

if(contains) {
 render alert
 //or do something else
} else {
 purchased.push(item)
}

I am not able to comment so I will delete this when you clarify.

answered Dec 8, 2018 at 15:44

Bens Steves

2,8593 gold badges19 silver badges30 bronze badges

1 Comment

Austin Over a year ago

I do have that setup already that is what the check variable is for in the first function.

Collectives™ on Stack Overflow

React Push One State Array into Another

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related