React: Javascript assignment not updating object

Question

Code here: https://codesandbox.io/s/github/nieroda/js_err

In function endTurn

    console.log(`GameBoard Before`)
    console.log(gameBoardCopy)

    gameBoardCopy[currentRow][4] = { numColorMatch: 2, numExactMatch: 2 }

    console.log(`GameBoard After`)
    console.log(gameBoardCopy)

See Console Output

Before:
5: Array(5)
0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

After 

5: Array(5)
0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

I can't figure out why it's not working?

Please include a minimal reproducible example in the question itself. — jhpratt
– jhpratt, Commented Feb 28, 2019 at 23:44
Take a look at this question. That might help. (I see line 1 has you assigning an object to another variable and calling that a "copy", but because assignment is "by reference" and not "by value" I don't think that does what you think it does - both the "copy" and the original are still the same object, you just gave it two different names.) — Garrett Motzner
– Garrett Motzner, Commented Feb 28, 2019 at 23:54
Tried making a deep copy of the object - the assignment still doesn't work @GarrettMotzner — Nate
– Nate, Commented Mar 1, 2019 at 1:14
You got some crazy mutation issues going on here :). When I step through with a debugger, the result is different than when I don't have a breakpoint set. So there is also a timing issue with the console and the point at which it logs the data. That is strange. So the data is being set, it's just then later being mutated. — Garrett Motzner
– Garrett Motzner, Commented Mar 1, 2019 at 18:59
Alright, so you have mutation happening in many places, and one of those is the hint block, when you are iterating through the pegs, you are mutating a data structure. Even with that fixed, there is still mutation. So, to help prevent that from happening, I'd recommend using Immutable.js. This gives you alternate immutable lists instead of arrays and immutable maps instead of objects, so that you can't accidentally mutate things. It is another thing to learn though... — Garrett Motzner
– Garrett Motzner, Commented Mar 1, 2019 at 19:48

Garrett Motzner · Accepted Answer · 2019-03-01 20:26:59Z

Your data is updating, but it is getting mutated elsewhere in the code, and the console.log isn't quite immediate enough (especially with the code sandbox wrapper around console.log). So in order to get around that do one of the following:

JSON.stringify your data before passing it to console.log. This will freeze the data into a string.
Deep copy your data structure before passing to console.log. (Problem is that there is no built-in deep copy for JS)
Use a debugger and set a breakpoint after the log, either with the debugger console or with the debugger statement. (Usually debugger statements are ignored if the debugger console is hidden, so make sure that is up). This will interrupt the normal flow and force the log to flush, giving you more accurate data.

That answers your question, but not your problem, which is that you are mutating things you don't expect to. That can be solved by making sure you are first (deep) copying everything you are mutating, not using mutation (libraries like Immutable.js can help there), or using something like MobX which allows you to mutate things and then subscribe to those mutation events.

Collectives™ on Stack Overflow

React: Javascript assignment not updating object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related