#react-native #expo #state #message
#react-native #expo #состояние #Сообщение
Вопрос:
У меня есть проект 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",
}
Пожалуйста, помогите мне обработать состояние ошибки и успешного завершения.
Ответ №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} }