Блог

У меня есть проект expo в react-native, в котором я создал форму и проверку 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",
   }
  

Пожалуйста, помогите мне обработать состояние ошибки и успешного завершения.

Мне удалось устранить проблему с помощью небольшого трюка:

В контекстном файле создайте 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} }