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)
                })
        })
    }

當我單擊按鈕時，將調用此 function。

第一次單擊按鈕時，我無法在console.log("now", exportedSyllabus)中獲取更新的 state 值，但如果單擊超過 1 次，則所有其他結果都是正確的。

無論我點擊多少次按鈕， console.log("temp", syllabusTemp)的結果總是正確的。

我對此感到非常困惑，為什么當我第一次單擊該按鈕時，我無法獲得console.log("now", exportedSyllabus)的正確 output 。

Answer 1

您需要在setState回調中訪問當前的 state，而不是之前保存在createSyllabusObject附件中的 state。

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!!
            })
    })
}