react js无法在setState回调function中获取更新值

Question

createSyllabusObject = () => {
        let number = 0;
        let syllabusTemp = [];
        let { lessonsList, exportedSyllabus } = this.state;
        Promise.all(lessonsList.map(async (lesson) => {
            let name = null;
            await getTeacherById(lesson.teacher).then(res => {
                name = res.data.name
                number += 1;
            })
            syllabusTemp.push({
                No: number,
                title: lesson.title,
                description: lesson.description,
                teacher: name,
                Time: moment(lesson.commenceDate).format('DD/MM/YYYY HH:mm')
            })
        })).then(() => {
            console.log("temp", syllabusTemp)
            this.setState(
                {
                    exportedSyllabus: syllabusTemp
                }
                , () => {
                    console.log("now", exportedSyllabus)
                })
        })
    }

This function will be called when I click a button.

I cannot get the updated state value in console.log("now", exportedSyllabus) when first time I click the button, but if I click it more than 1 time, all other results will be correct.

The result of console.log("temp", syllabusTemp) is always right no matter how many times I click the button.

I really confused about this, why I cannot get a proper output of console.log("now", exportedSyllabus) when I click the button first time.

Answer 1

You'll want to access the current state in the setState callback, not the previous state saved in the createSyllabusObject enclosure.

createSyllabusObject = () => {
    let number = 0;
    let syllabusTemp = [];
    let { lessonsList, exportedSyllabus } = this.state;
    Promise.all(lessonsList.map(async (lesson) => {
        let name = null;
        await getTeacherById(lesson.teacher).then(res => {
            name = res.data.name
            number += 1;
        })
        syllabusTemp.push({
            No: number,
            title: lesson.title,
            description: lesson.description,
            teacher: name,
            Time: moment(lesson.commenceDate).format('DD/MM/YYYY HH:mm')
        })
    })).then(() => {
        console.log("temp", syllabusTemp)
        this.setState(
            {
                exportedSyllabus: syllabusTemp
            }
            , () => {
                console.log("now", this.state.exportedSyllabus) // <-- access this.state!!
            })
    })
}