Question 72800 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React: State value becomes undefined in useEffect() – Reactjs

Can’t figure out what is going on here (using an image because it’s clearer to explain).

On highlighted line #114, movesAry is undefined. Initially, all breakpoints (outside of the one highlighted, which is not executed initially) show it as an empty array. However, when selecteDb changes and useEffect() is triggered for the first time, the movesAry value has become undefined. Note that no call to setMovesAry() has been made yet. Subsequent breakpoints now also show that movesAry is undefined.

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I wound up breaking down the component into smaller ones, ending up with a MoveRows component that gets the movesAry state via props. So now in my useEffect function I am able to setMovesAry without it blowing away the movesAry state.

    const MoveRows = ({ selectedDb, setMovesAry, movesAry }) => {
    const { db } = selectedDb
    const doMore = () => {
        const arrSeg = addMoves({ db }).next()
        if (!arrSeg.done) setMovesAry(prev => prev.concat(arrSeg.value))
    }

    useEffect(() => {
        if (db) {
            setMovesAry([])
            doMore()
        }
    }, [selectedDb])
   ...

    I also got rid of the pojos ref by merging it into the selectedDb structure. Everything seems to work now, so I'll mark this as the answer.


  2. 0

    What could be happening is that, on line 120, arrSeg gets assigned an object such that arrSeg.value is undefined. Then you call setMovesAry(arrSeg.value), which causes movesAry to be undefined

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search