Javascript ReactJS状态未正确呈现

我正在使用Django Rest框架开发React应用程序，并在其中更新用户配置文件。 一切正常，但有一个小问题我想不出解决办法。 当我更新用户电子邮件并且输入的电子邮件已经存在于数据库中时，DRF发回一个错误。 在my user reducer中，状态更新为错误。但是react不会呈现该输出，而是呈现成功场景，尽管电子邮件没有更新

当我第二次使用同一封电子邮件访问表单时，它会呈现错误消息。现在，如果我将电子邮件更改为唯一的电子邮件并提交，电子邮件将在DB中更新，updateProfileState也会更新。但错误消息会显示在前端配置文件页面上。同样，如果我使用相同的电子邮件地址或任何其他现有电子邮件提交表单，则会呈现成功场景。我必须再次提交表单才能在屏幕上显示错误消息

对这个问题的天真描述是，我的前端页面落后于实际状态。

这是我的行动

export const userUpdateProfileReducer=(state={}, action)=> {
switch (action.type) {
    case USER_PROFILE_UPDATE_REQUEST:
        return {...state, success: false}

    case USER_PROFILE_UPDATE_SUCCESS:
        return {success: true, user : action.payload}

    case USER_PROFILE_UPDATE_FAIL:
        return {success: false, error: action.payload}

    default:
        return state
}

const handleSubmit = event => {
    event.preventDefault();

    if (Object.values(formValidity).every(Boolean)) {
        dispatch(updateUserProfile({'first_name': formValues.first_name, 'last_name':formValues.last_name, 'username': formValues.email, 'email': formValues.email}))

        if(success===true) {
            console.log(success)
            toast('Profile updated successfully...', {position:toast.POSITION.TOP_CENTER, autoClose: 2000})
        }
        else {
            error && error["email"].map(msg => (formErrors.email = msg))
        }
    }

};

export const updateUserProfile=（用户）=>async（分派，getState）=>{ const{userLogin:{userInfo}}=getState（）

}

和我的减速器功能

export const userUpdateProfileReducer=(state={}, action)=> {
switch (action.type) {
    case USER_PROFILE_UPDATE_REQUEST:
        return {...state, success: false}

    case USER_PROFILE_UPDATE_SUCCESS:
        return {success: true, user : action.payload}

    case USER_PROFILE_UPDATE_FAIL:
        return {success: false, error: action.payload}

    default:
        return state
}

const handleSubmit = event => {
    event.preventDefault();

    if (Object.values(formValidity).every(Boolean)) {
        dispatch(updateUserProfile({'first_name': formValues.first_name, 'last_name':formValues.last_name, 'username': formValues.email, 'email': formValues.email}))

        if(success===true) {
            console.log(success)
            toast('Profile updated successfully...', {position:toast.POSITION.TOP_CENTER, autoClose: 2000})
        }
        else {
            error && error["email"].map(msg => (formErrors.email = msg))
        }
    }

};

}

我的handleSubmit函数

export const userUpdateProfileReducer=(state={}, action)=> {
switch (action.type) {
    case USER_PROFILE_UPDATE_REQUEST:
        return {...state, success: false}

    case USER_PROFILE_UPDATE_SUCCESS:
        return {success: true, user : action.payload}

    case USER_PROFILE_UPDATE_FAIL:
        return {success: false, error: action.payload}

    default:
        return state
}

const handleSubmit = event => {
    event.preventDefault();

    if (Object.values(formValidity).every(Boolean)) {
        dispatch(updateUserProfile({'first_name': formValues.first_name, 'last_name':formValues.last_name, 'username': formValues.email, 'email': formValues.email}))

        if(success===true) {
            console.log(success)
            toast('Profile updated successfully...', {position:toast.POSITION.TOP_CENTER, autoClose: 2000})
        }
        else {
            error && error["email"].map(msg => (formErrors.email = msg))
        }
    }

};

正在使用useSelector从Reducer中提取成功和错误变量

const updateProfile = useSelector(state => state.userUpdateProfile)
const {loading, success, error} = updateProfile

当我在Redux开发工具中检查状态时，状态被正确更新。只有我的头版没有得到正确的值。只有当我更新电子邮件时才会发生这种情况。对于电子邮件以外的任何东西，它都可以正常工作

有谁能帮我找出我做错了什么？ 编辑： 这是我想要呈现错误消息的表单。在成功场景中，我将显示一个toast弹出窗口。（参见handleSubmit函数中的）

电子邮件
{formErrors.email}

这将在dispatch语句之后运行。因此，此获取的值不会更新，因为调度需要一些时间来更新状态，因为它是一个网络请求

尝试使用wait，或在useffect中执行检查（页面级别检查页面中的任何错误）

---

您希望在何处呈现成功场景或错误场景？@ksav我已添加了要呈现错误消息的表单。您可以检查此值来自何处吗<代码>表单错误是呈现表单的组件的内部状态吗？它是内部状态。我正在用DRF和FormValidation发送的错误消息填充它。不管怎样，我的问题是由罗希特的回答解决的。感谢您的宝贵意见。请使用useEffect尝试此操作。还是一样的问题。我通过什么作为依赖项？我正在将dispatch、success、error作为dependecy.props.success和props.error（来自redux商店的error和success）传递，谢谢你，伙计。这解决了我的问题。此外，我没有在更新成功后立即重置updateProfile状态。这给我下次加载页面时带来了麻烦。现在修好了。