Как обрабатывать условия после асинхронного запроса
Спасибо за чтение моего вопроса заранее. Я использую dva и Ant Design Mobile из функции регистрации телефона React.
Перед отправкой кода подтверждения я буду судить, был ли телефон зарегистрирован. Если да, то будет тост "Этот телефон был зарегистрирован".
Теперь возвращаемое значение верное:
const mapStateToProps = (state) => {
console.log(state.register.message)
}
// {code: 221, message: "This phone has been registered"}
Поэтому я пишу это как:
const mapStateToProps = (state) => ({
returnData: state.register.message
})
И тогда, когда я нажимаю кнопку, она отправляет действие (отправляет запрос):
getVerifyCode() {
const { form, returnData } = this.props;
const { getFieldsValue } = form;
const values = getFieldsValue();
this.props.dispatcher.register.send({
phone: values.phone,
purpose: 'register',
})
// if(returnData.code === 221){
// Toast.fail("This phone has been registered", 1);
// } else {
// Toast.success("Send verify code successfully", 1);
// }
}
Но когда я попытался добавить условие if...else в соответствии с возвращаемым значением
if(returnData.code === 221){
Toast.fail("This phone has been registered", 1);
} else {
Toast.success("Send verify code successfully", 1);
}
только чтобы получить ошибку:
Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'code' из undefined
Я предположил, что это проблема с aynchromous и попытался использовать async await:
async getVerifyCode() {
...
await this.props.dispatcher.register.send({
phone: values.phone,
purpose: 'register',
})
}
Но получите ту же ошибку
Невозможно прочитать свойство 'код' из неопределенного
Интересно, почему и как решить эту проблему?
добавлено: это модели
import * as regiserService from '../services/register';
export default {
namespace: 'register',
state: {},
subscriptions: {
},
reducers: {
save(state, { payload: { data: message, code } }) {
return { ...state, message, code };
},
},
effects: {
*send({ payload }, { call, put }) {
const { data } = yield call(regiserService.sendAuthCode, { ...payload });
const message = data.message;
yield put({ type: 'save', payload: { data },});
},
},
};
1 ответ
С условиями обработки в моделях решена проблема:
*send({ payload }, { call, put }) {
const { data } = yield call(regiserService.sendAuthCode, { ...payload });
if(data.code === 221){
Toast.fail("This phone has been registered", 1);
} else {
Toast.success("Send verify code successfully", 1);
}
yield put({ type: 'save', payload: { data }});
}