如何在 React.js 中观看 object state

Question

Here is my app code:

const [myState, setMyState] = useState(() => {
    return {
        flag1: false,
        flag2: false
    }
})

useEffect(() => {
    console.log(myState)
}, [myState])

setMyState({ ...myState, flag1: true })

Last row triggers useEffect() but console output shows old state:

{flag1: false, flag2: false}

What am I doing wrong? I want to watch when all flag fields and once these are true - then I'll execute some code in useEffect. What would be best approach to do it?

Answer 1

You dont need a function in useState.

Use prevState in setMyState, this way you will get the current state values

const [myState, setMyState] = useState( {
        flag1: false,
        flag2: false
    });

useEffect(() => {
    console.log(myState)
}, [myState])

setMyState(prevState=>({ ...prevState, flag1: true }));