ReactJS 状态未正确呈现

Posted 2023-03-11

【中文标题】ReactJS 状态未正确呈现

【英文标题】：ReactJS states not being rendered correctly

【发布时间】：2021-08-17 06:26:19

【问题描述】：

我正在使用 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>

【问题讨论】：

您希望在哪里呈现成功场景或错误场景？

@ksav 我已经添加了要呈现错误消息的表单

你能检查一下这个值是从哪里来的吗？ formErrors 是呈现表单的组件的内部状态吗？

内部状态。我用从 DRF 和 formValidation 发送的错误消息填充它。无论如何，Rohit 的回答解决了我的问题。感谢您的宝贵意见。

【参考方案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]);

【讨论】：

使用 useEffect 进行了尝试。还是同样的问题。我将什么作为依赖项传递？我将调度、成功、错误作为依赖传递。

props.success 和 props.error（来自 redux 存储的错误和成功）

谢谢伙计。这解决了我的问题。此外，我没有在成功更新后立即重置 updateProfile 状态。这给我下次加载页面时带来了麻烦。现已修复。