Trying to build a simple candy crush web app and changing the state of the app component crashes the app.
The error message says :
react-dom.development.js:18687 The above error occurred in the <App> component:
at App (http://localhost:3000/static/js/bundle.js:45:76)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
It doesn't give any details about the error but just leaves me with this message.
The function responsible for this is :
const dragEndHandler = () => {
let tempBoard = [...board]
let foo = tempBoard[squareBeingDragged]
tempBoard[squareBeingDragged] = tempBoard[squareBeingReplaced]
tempBoard[squareBeingReplaced] = foo
if (true) {//add valid move logic
setBoard(tempBoard) //removing this fixes it
}
}
as the comment suggests, removing setBoard(tempBoard) fixes the issue but I'm not sure why this happens.
I have used a similar approach in my row/column checker and that seems to work, it looks something like :
const checkRowMatch = () => {
let tempScore = 0, tempBoard = [...board]
...
setBoard(tempBoard)
}
I've also attempted putting this in a try catch