错误状态和成功消息在世博会项目中不清楚

Question

我在 react-native 中有一个 expo 项目，我在其中创建了表单和 otp 验证，成功和错误消息将在其中闪烁。状态已正确填充，但即使在操作完成后错误消息或成功消息仍然存在。我正在使用上下文作为响应和状态。

上下文文件的代码片段

 const authReducer = (state, action) => {
        switch (action.type) {
          case 'add_error':
            return { ...state, errorMessage: action.payload };
         
          case 'clear_error_message':
            return { ...state, errorMessage: ''};
    
          case 'voter_auth':
            return {  successMessage: action.payload };
    
          case 'otp_success':
              return { successMessage: action.payload };
          
          
          
           
              default:
                return state;
        }
      };
      const clearErrorMessage = dispatch => () => {
         dispatch({ type: "clear_error_message" });
      };
      
    const authVoters = dispatch => async ({id, mailId, mobNum}) => {
      
           let response = await trackerApi.post('/addVoters' ,  {id, mailId, mobNum});
          
    
        if (response.data === 'Success') {
           navigate('Face', id);
    
        }
     
         else if (id === ''  || mobNum === '' || mailId === '' )
        {
          dispatch({
            type: 'add_error',
            payload: 'Please Enter The Mandatory Fields'
          });
        }
        else {    
            dispatch({
                type: 'add_error',
                payload: 'Voter is Not Registered'
              });
            }
              
    
    };
    
    
    
    Code snippet for message display in Screen.js
    
    {state.errorMessage ? (
         showMessage({
            message: state.errorMessage,
            type: "danger",
            icon: "danger"
          })
             
            ) : null}
    { {state.successMessage ? (
              showMessage({
                message: state.successMessage,
                type: "success",
                icon: "success"
              })
            ) : null} }

状态控制台：

State  Object {
      "errorMessage": "Please Enter The Mandatory Fields",
      "successMessage": "Mobile Number Verified",
   }

请帮我处理错误和成功状态。

Answer 1

我设法用一个小技巧解决了这个问题：

在上下文文件中，创建 clearErrorMessage，它会将“”分配给状态。

const authReducer = (state, action) => {
        switch (action.type) {
          case 'add_error':
            return { ...state, errorMessage: action.payload };
         
          case 'clear_error_message':
            return { ...state, errorMessage: '', successMessage: ''};
    
          case 'voter_auth':
            return {  successMessage: action.payload };
    
          case 'otp_success':
              return { successMessage: action.payload };
          
              default:
                return state;
        }
      };
      const clearErrorMessage = dispatch => () => {
         dispatch({ type: "clear_error_message" });
      };


  Add Navigation to the screen:
    <NavigationEvents onWillFocus={clearErrorMessage} />

While setting the error and success message state call the clearErrorMessage function.

    {state.errorMessage ? (
         showMessage({
            message: state.errorMessage,
            type: "danger",
            icon: "danger"
          }    
          ),  clearErrorMessage()
    
            ) : null}
    
    {{state.successMessage ? (
              showMessage({
              message: state.successMessage,
                type: "success",
                icon: "success"
              })
            ), clearErrorMessage() : null} }

错误状态和成功消息在世博会项目中不清楚

State for error and success message not getting clear in expo project

state

message

react-native

expo