异步请求后如何处理条件
How to handle conditions after asynchronous request
感谢您提前阅读我的问题。我正在使用 dva and Ant Design Mobile of React 处理 phone 注册函数。
在发送验证码之前,我会判断phone是否已经注册。如果是,它会提示“This phone has been registered”。
现在,return 值是正确的:
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);
// }
}
但是当我尝试根据 return 值添加 if...else 条件时
if(returnData.code === 221){
Toast.fail("This phone has been registered", 1);
} else {
Toast.success("Send verify code successfully", 1);
}
只得到错误:
Uncaught (in promise) TypeError: Cannot read property 'code' of
undefined
我认为这是关于异步的问题并尝试使用异步等待:
async getVerifyCode() {
...
await this.props.dispatcher.register.send({
phone: values.phone,
purpose: 'register',
})
}
但是得到同样的错误
Cannot read property 'code' of undefined
我想知道为什么以及如何解决这个问题?
补充:这是模型
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 },});
},
},
};
处理模型中的条件解决了问题:
*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 }});
}
感谢您提前阅读我的问题。我正在使用 dva and Ant Design Mobile of React 处理 phone 注册函数。
在发送验证码之前,我会判断phone是否已经注册。如果是,它会提示“This phone has been registered”。
现在,return 值是正确的:
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);
// }
}
但是当我尝试根据 return 值添加 if...else 条件时
if(returnData.code === 221){
Toast.fail("This phone has been registered", 1);
} else {
Toast.success("Send verify code successfully", 1);
}
只得到错误:
Uncaught (in promise) TypeError: Cannot read property 'code' of undefined
我认为这是关于异步的问题并尝试使用异步等待:
async getVerifyCode() {
...
await this.props.dispatcher.register.send({
phone: values.phone,
purpose: 'register',
})
}
但是得到同样的错误
Cannot read property 'code' of undefined
我想知道为什么以及如何解决这个问题?
补充:这是模型
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 },});
},
},
};
处理模型中的条件解决了问题:
*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 }});
}