Hi fellow campers,
So I have this problem, where I have a simple form, there might be more than one form field but they are all related to each other. What I’m trying to do is to calculate the last input’s value which is based on the rest of the inputs’ value and are typed dynamically and then to setState() to return a new state. I have handler functions (to add, remove or change value of input fields) which work when I don’t need to handle this particular update. Now here’s the code:
class App extends React.Component {
state = {
bank: 10,
totalPrice: 0,
hands: [
{
name: "hand1",
backPrice: 0,
bankPrice: 0,
commision: 0,
realPrice: 0
}
],
handCount: 1
};
componentDidUpdate(prevProps, prevState) {
const hands = this.state.hands;
// initialized variables needed to calculate a result
const totalPrice = hands.reduce((total, hand) => {
return (hand.backPrice || 1) * total;
}, 1);
// lastHandPrice is ALWAYS needed, it is the base of the rest of calculations
const lastHandPrice = (this.state.bank * totalPrice) /
(hands[hands.length - 1].bankPrice -
(hands[hands.length - 1].commision / 100));
const newHands = hands.reduceRight(
// calculation starts in reverse, with the first value being lastHandPrice
// it returns an array of number values reversed again to be in correct order
(newHands, hand, ind, array) => {
let prevHand = array[ind + 1];
let prevPrice = newHands[array.length - ind - 2];
if (hand == array[array.length - 1]) {
return newHands.concat(lastHandPrice)
} else {
return newHands.concat(
prevPrice * (1 - (prevHand.commision / 100)) /
(hand.bankPrice - (hand.commision / 100))
)
}
}, []
).reverse();
if (this.state.hands !== prevState.hands)
this.setState({
totalPrice: totalPrice,
hands: this.state.hands.map((hand, index) => {
return Object.assign(hand, {realPrice: newHands[index]})
})
})
}
There are four main input fields, represented in state.hands.
So this code works correctly in my terminal but react throws me a Maximum update depth exceeded error when I try the following:
-
Add a new hand to the array
-
Try to enter anything in the input
There’s nothing more I can really do about it. I tried a few other methods to achieve this, but I always get the same error. It seems like some kind of loop starts to work but I just can’t figure it out. Why it won’t let me to update state.hands?
Input change/add/or remove handlers are very predictable, just updating the needed value, adding a field of four input fields, and removing them. To change the value I map() over the state.hands and then Object.assign() the property value I need to the object I need (hand1, hand2, etc).