这是我的组成部分:
class PreCreate extends Component {
handleStartBtn = e => {
this.props.createSurvey(name);
};
componentDidUpdate(prevProps, prevState) {
if (prevProps.currentSurvey !== this.props.currentSurvey) {
const cookies = new Cookies();
cookies.set("assignments", `EHS_${this.props.currentSurvey.uuid}`, {
path: "/"
});
}
this.props.history.push("/polling");
}
render() {
return (
<Button type="primary" onClick={this.handleStartBtn}>
Start
</Button>
);
}
}
const mapStateToProps = state => {
return {
currentSurvey: state.survey.currentSurvey
};
};
const mapDispatchToProps = dispatch => {
return {
createSurvey: name => dispatch(createSurvey(name))
};
};
export default withRouter(
connect(
mapStateToProps ,
mapDispatchToProps
)(PreCreate)
);
createSurvey方法是位于我的Redux动作中的调度程序,其外观如下:
export const surveySuccess = survey => {
return {
type: actionType.SURVEY_SUCCESS,
currentSurvey: survey
};
};
export const createSurvey = name => {
return dispatch => {
dispatch(surveyStart());
axios({
method: "post",
data: {
name: name
},
url: `http://127.0.0.1:8000/survey/`,
headers: {
"Content-Type": "application/json"
}
})
.then(res => {
const survey = res.data;
dispatch(surveySuccess(survey));
})
.catch(err => {
console.log(err);
dispatch(surveyFail(err));
});
};
};
我的问题是,当handleStartBtn方法开始运行并调用createSurvey方法时,它成功进入了位于我的Redux动作中的createSurvey方法,但是与通过Axis发送我的数据有关的操作似乎会推迟到调用componentDidUpdate有完成了。在执行componentDidUpdate中的操作后,它运行服务器端操作并达到Redux状态。