Timing issues with state

[jyang1003]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

My state is not updating when it should be

Post any code you think might be relevant (one fenced block per file)

fetch(`http://localhost:8000/intake/${props.profile._id}`, {
                method: 'POST',
                body: JSON.stringify(nutritionInput),
                headers: { 'Content-Type': 'application/JSON'}
            })
            .then((response) => {
                props.getProfile()

                const allNutrition = props.profile.nutrition
                // console.log('this is today', today.getDate)
                console.log('all nutrition', allNutrition)
                // console.log('this is date', date)
                let thisDayNutrition = allNutrition.filter(object => object.date == date)
                // console.log('this is todays nutrition', thisDayNutrition)
                thisDayNutrition.forEach(object => {
                    calArray.push(object.calories)
                    proArray.push(object.protein)
                    carbArray.push(object.carbs)
                    fatArray.push(object.fats)
                })
                setTotalCal(calArray.reduce((a, b) => a + b, 0))
                setTotalPro(proArray.reduce((a, b) => a + b, 0))
                setTotalCarb(carbArray.reduce((a, b) => a + b, 0))
                setTotalFat(fatArray.reduce((a, b) => a + b, 0))
            })
            .catch(error => {console.log(error)})

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

no error message, but the state should be updating on submit however it is one step behind so i have to post twice before it updates

What is your best guess as to the source of the problem?

maybe an issue with the promise chain or timing

What things have you already tried to solve the problem?

tried moving the setStates and all the math pertaining to it to various locations

[DoireannJane]

Can you post your setState and list where you've tested it?

[jyang1003]

my set state is

                setTotalCal(calArray.reduce((a, b) => a + b, 0))
                setTotalPro(proArray.reduce((a, b) => a + b, 0))
                setTotalCarb(carbArray.reduce((a, b) => a + b, 0))
                setTotalFat(fatArray.reduce((a, b) => a + b, 0))

[jyang1003]

    useEffect(() => {
        props.getProfile()
        const allNutrition = props.profile.nutrition
        // console.log('this is today', today.getDate)
        console.log('all nutrition', allNutrition)
        // console.log('this is date', date)
        let thisDayNutrition = allNutrition.filter(object => object.date == date)
        console.log('this is todays nutrition', thisDayNutrition)
        thisDayNutrition.forEach(object => {
            calArray.push(object.calories)
            proArray.push(object.protein)
            carbArray.push(object.carbs)
            fatArray.push(object.fats)
        })
        setTotalCal(calArray.reduce((a, b) => a + b, 0))
        setTotalPro(proArray.reduce((a, b) => a + b, 0))
        setTotalCarb(carbArray.reduce((a, b) => a + b, 0))
        setTotalFat(fatArray.reduce((a, b) => a + b, 0))
    }, [])
    const formik = useFormik({
        initialValues: {
            calories: 0,
            protein: 0,
            carbs: 0,
            fats: 0,
            date:''
        },
        onSubmit: () => {
            let nutritionInput = {
                calories: formik.values.calories,
                protein: formik.values.protein,
                carbs: formik.values.carbs,
                fats: formik.values.fats,
                date: formik.values.date
            }
            console.log('this is the info', nutritionInput)
            fetch(`http://localhost:8000/intake/${props.profile._id}`, {
                method: 'POST',
                body: JSON.stringify(nutritionInput),
                headers: { 'Content-Type': 'application/JSON'}
            })
            .then((response) => {
                props.getProfile()

                const allNutrition = props.profile.nutrition
                // console.log('this is today', today.getDate)
                console.log('all nutrition', allNutrition)
                // console.log('this is date', date)
                let thisDayNutrition = allNutrition.filter(object => object.date == date)
                // console.log('this is todays nutrition', thisDayNutrition)
                thisDayNutrition.forEach(object => {
                    calArray.push(object.calories)
                    proArray.push(object.protein)
                    carbArray.push(object.carbs)
                    fatArray.push(object.fats)
                })
                setTotalCal(calArray.reduce((a, b) => a + b, 0))
                setTotalPro(proArray.reduce((a, b) => a + b, 0))
                setTotalCarb(carbArray.reduce((a, b) => a + b, 0))
                setTotalFat(fatArray.reduce((a, b) => a + b, 0))
            })
            .catch(error => {console.log(error)})
        }            
    })

I've tested it outside of the promise, at the start of the promise, at the end of the promise