I have one method where I am trying get data from clicked buttons. Every button has value which I assigns to state in constructor by setState method. The limit clicked buttons and assigns to variable is three later we can only unchecked buttons and change value if it is needed. If user will click on three buttons next step will automatically display I am trying to get this result by componentDidUpdate but it makes infinity loop error exactly :
"Uncaught Error: Maximum update depth exceeded. This can happen when a
component repeatedly calls setState inside componentWillUpdate or
componentDidUpdate. React limits the number of nested updates to
prevent infinite loops."
1. Handle button event
handleDestination(name) {
const destinationPick = this.titleRefs[name];
const destinationIndex = this.state.inputs.findIndex((input) => input.id === "destination");
if (destinationPick) {
if (destinationPick.classList.contains("border-danger")) {
destinationPick.classList.remove("border-4");
destinationPick.classList.remove("border-danger");
this.setState((prevState) => ({
count: prevState.count - 1
}))
const updatedInputs = this.state.inputs.map((input, index) => {
if (index === destinationIndex) {
const value = input.value;
const value1 = input.value1;
const value2 = input.value2;
switch (name) {
case value:
return {...input, value: ""}
case value1:
return {...input, value1: ""}
case value2:
return {...input, value2: ""}
}
}
return input;
})
this.setState({
inputs: updatedInputs
})
} else {
if (this.state.count < 3) {
destinationPick.classList.add("border-4");
destinationPick.classList.add("border-danger");
const updatedInputs = this.state.inputs.map((input, index) => {
if (index === destinationIndex) {
let count = 0;
const value = input.value;
const value1 = input.value1;
const value2 = input.value2;
if (value === "") {
count = 0;
} else if (value1 === "") {
count = 1;
} else if (value2 === "") {
count = 2;
}
switch (count) {
case 0:
return {...input, value: name}
case 1:
return {...input, value1: name}
case 2:
return {...input, value2: name}
}
}
return input;
})
this.setState((prevState) => ({
inputs: updatedInputs,
count: prevState.count + 1
}))
}
}
}
}
2. componentDidUpdate
componentDidUpdate(prevProps, prevState, snapshot) {
const destinationInput = this.state.inputs.find((input) => input.id === "destination");
const prevDestinationInput = prevState.inputs.find((input) => input.id === "destination");
if (destinationInput !== prevDestinationInput) {
const destinationIndex = this.state.inputs.findIndex((input) => input.id === "destination");
if (destinationInput.value !== "" && destinationInput.value1 !== "" && destinationInput.value2 !== "") {
const updatedInputs = this.state.inputs.map((input, index) => {
if (index === destinationIndex) {
return {...input, isSet: true, info: false}
} else if (index === destinationIndex + 1) {
return {...input, info: true}
}
return input;
})
this.setState({
inputs: updatedInputs
})
}
}
}
Anyone have idea how to fix this error I am getting it in setState in componentDidUpdate. I have read about it and I should avoid before it by write if statement where componentDidUpdate is running only when previous state is changed but I wrote it and nothing change.
Hope is it clear.Thanks for the help in advance!
2
Answers
The error you are facing, "Uncaught Error: Maximum update depth exceeded," occurs because the componentDidUpdate method is causing an infinite loop of state updates. The reason is that inside componentDidUpdate, you are calling setState, which triggers a re-render, and componentDidUpdate is called again, creating an endless loop.
To fix this issue, you need to add a condition inside componentDidUpdate to make sure that the state is only updated when the specific condition you want to check is met. This will prevent unnecessary re-renders and infinite loops.