ReactJS 状态未正确呈现

Question

我正在使用 Django Rest Framework 开发一个 React 应用程序，我正在更新用户配置文件。 一切正常，但有一个小问题我无法解决。 当我更新用户电子邮件并且输入的电子邮件已存在于 DB 中时，DRF 会发回一个错误。 在我的用户减速器中，状态随错误而更新。但是 react 不会呈现该输出，它会呈现成功场景，尽管电子邮件没有更新。

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

对这个问题的简单描述是，我的前端页面是实际状态之后的一个状态。

这是我的行动

export const updateUserProfile = (user)=> async (dispatch, getState) =>{ const {userLogin: {userInfo}} = getState()

try {
    dispatch({
        type: USER_PROFILE_UPDATE_REQUEST
    })

    const config = {
        headers : {
            'Content-Type':'application/json',
            Authorization: `Bearer ${userInfo.access}`
        }
    }

    const {data} = await axios.patch('/api/v1/users/me/', user, config)

    dispatch({
        type: USER_PROFILE_UPDATE_SUCCESS,
        payload: data
    })

}
catch (error) {
    dispatch({
        type: USER_PROFILE_UPDATE_FAIL,
        payload: error.response.data.old_password ? error.response.data.old_password
            : error.response.data
    })
}

}

还有我的减速器功能

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
}

}

我的 handleSubmit 函数

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

};

从 reducern usig useSelector 中提取成功和错误变量。

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

当我在 Redux Dev Tools 中检查状态时，状态正在正确更新。只有我的首页没有得到正确的价值。只有当我更新电子邮件时才会发生这种情况。对于电子邮件以外的任何其他内容，它都可以正常工作。

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

 <FormGroup className="row">
                        <FormLabel className="col-xl-3 col-lg-3 col-form-label text-alert">Email</FormLabel>
                        <div className="col-lg-9 col-xl-6">
                            <FormControl
                                type="email"
                                name="email"
                                className={`form-control form-control-lg form-control-solid mb-2 ${
                                    formErrors.email ? "is-invalid" : ""
                                }`}
                                placeholder="Enter Email"
                                onChange={handleChange}
                                value={formValues.email}
                            />
                            <div className="ml-2 text-md-left invalid-feedback">{formErrors.email}</div>
                        </div>
                    </FormGroup>

Answer 1

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

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

尝试使用 await，或者在 useEffect 中进行检查（页面级别检查页面中的任何错误）

useEffect(() => {
    if (props.error) {
        toast.error(props.error);
    }
    if(props.success){
      toast.success('success message') 
    }

}, [props.error, props.success]);