React increment and decrement array counters in state - reactjs

Question

I have some trouble trying to figure out why I can't correctly increment/decrement four counters in an array, which is in the app state. The array in the state is this:
...
constructor(props) {
super(props);
this.state = {
right: 0,
left: 0,
up: 0,
down: 0,
...more variables...
bank: [0, 0, 0, 0] // <- array with 4 counters set to zero
};
}
...
The application fetches JSON data from a Node.js server, and saves the incoming data in the "left", "right", "up" and "down" vars you can see in the state. I select which counter should be incremented/decremented (which I called 'bank') reading the "left" and "right" JSON data, and increment or decrement with "up" and "down". Those signals are working correctly, but the problem is in the logic I think.
This is the function that handles the bank selection (the counter):
bankSelection() {
if (parsedJsonData.right) {
currentBank += 1;
if (currentBank > maxBank) { // restart from zero
currentBank = 0;
}
} else if (parsedJsonData.left) {
currentBank -= 1;
if (currentBank < 0) { // restart from 3
currentBank = 3;
}
}
}
I don't save the bank value in the state, since it shouldn't be rendered. The problem comes with the increment/decrement function:
updateCounters() {
if (parsedJsonData.up) {
if (this.state.bank[currentBank] < 9) {
let bankValue = this.state.bank[currentBank] + 1;
this.setState({ bank: bankValue });
} else {
this.setState({ bank: this.state.bank[currentBank] = 0 });
}
} else if (parsedJsonData.down) {
if (this.state.bank[currentBank] > 0) {
let bankValue = this.state.bank[currentBank] - 1;
this.setState({ bank: bankValue });
} else {
this.setState({ bank: this.state.bank[currentBank] = 9 });
}
}
}
I see the React engine complains on line 7 and 14, saying I shouldn't mutate the state directly, but I'm inside a setState function!
Beside this, when I send a JSON formatted like this:
{
"left": 0,
"right": 0,
"up": 1,
"down": 0
}
the first time the counter in the first bank is updated correctly and shows value 1, but the second time I get this error in the browser's console:
Uncaught (in promise) TypeError: Cannot create property '0' on number '1'
at App.updateCounters (App.js:145:1)
at App.js:112:1
I tryed so many solutions I'm going crazy, any help would me appreciated...
You can find the full code here but bear in mind it's still a work in progress in the render method (the first bank is the only one usable, still testing various solutions).
I hope I gave you all the info to help me fix the error.

Answer 1

I see a few problems with your code.
bank's value is array. You're trying to change it to integer with this.setState({ bank: bankValue })
State should be immutable, if you wish to change the value, you need to create a new array and set the bank state. Something like this:
this.setState({bank: Object.values({...this.state.bank, 1: 100}); // where 1 is the idx where you want to update the value, and 100 is the new value

Answer 2

Finally, I managed to solve the problem.
I managed this using the spread operator and avoiding direct assignment inside the setState method.
updateCounters() {
if (parsedJsonData.up) {
if (this.state.bank[currentBank] < 9) {
// let bankValue = this.state.bank[currentBank] + 1;
var newArrayUp = [...this.state.bank];
newArrayUp[currentBank] += 1;
console.log("array clonato dopo aggiornamento " + [...newArrayUp]);
this.setState({ bank: [...newArrayUp] }, () => {
this.forceUpdate();
});
} else {
var zeroArray = [...this.state.bank];
zeroArray[currentBank] = 0;
console.log(zeroArray[currentBank]);
this.setState({ bank: [...zeroArray] });
this.forceUpdate();
}
} else if (parsedJsonData.down) {
if (this.state.bank[currentBank] > 0) {
var newArrayDown = [...this.state.bank];
newArrayDown[currentBank] -= 1;
console.log("array clonato dopo aggiornamento " + [...newArrayDown]);
this.setState({ bank: [...newArrayDown] }, () => this.forceUpdate());
} else {
var nineArray = [...this.state.bank];
nineArray[currentBank] = 9;
console.log(nineArray[currentBank]);
this.setState({ bank: [...nineArray] }, () => this.forceUpdate());
}
}
}
Now I create a copy of the original array, work on it and then pass it to the setState method.
Thanks for suggestions!