Как обрабатывать условия после асинхронного запроса - PullRequest
0 голосов
/ 01 мая 2018

Спасибо, что прочитали мой вопрос заранее. Я использую 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' из не определено

Я предположил, что это проблема с aynchromous, и попытался использовать async await:

  async getVerifyCode() {
    ...
    await this.props.dispatcher.register.send({
        phone: values.phone,
        purpose: 'register',
      })
  }

Но получите ту же ошибку

Невозможно прочитать свойство 'code' из неопределенного

Интересно, почему и как решить эту проблему?

добавлено: это модели

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 Ответ

0 голосов
/ 02 мая 2018

Условия обработки в моделях решили проблему:

*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 }});
  }
...