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

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

单击按钮时将调用此函数。

我第一次点击按钮时无法在 console.log("now", exportedSyllabus) 中获取更新的状态值，但是如果我点击它超过 1 次，所有其他结果都是正确的。

无论点击多少次，console.log("temp", syllabusTemp)的结果总是正确的。

我真的很困惑，为什么我第一次点击按钮时无法正确输出 console.log("now", exportedSyllabus)。

Answer 1

您需要在 setState 回调中访问当前状态，而不是保存在 createSyllabusObject 附件中的先前状态。

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

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

react js cannot get updated value in setState callback function

javascript

callback

reactjs

es6-promise