ReactJS状态未正确呈现

Question

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

当我用同一封电子邮件第二次汇总表单时，它会显示错误消息。现在，如果我将电子邮件更改为唯一的电子邮件并提交，那么电子邮件将在DB中更新，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 using useSelector中提取的。

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

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

有人能帮帮我吗？我做错了什么？编辑：这是我要呈现错误消息的表单。在成功的情况下，我会显示一个吐司弹出窗口。(请参阅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语句之后运行。因此，由于调度需要一些时间来更新状态，因此它获得的值不会更新，因为它是一个网络请求。

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

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