Javascript React/JS-在操作调用的服务器响应上创建条件
我有一个模式来添加todo项目,该项目在提交后会重置,但如果提交失败,它也会重置,我如何使我的模式保持打开状态,用户可以看到他们所犯的错误Javascript React/JS-在操作调用的服务器响应上创建条件,javascript,reactjs,axios,Javascript,Reactjs,Axios,我有一个模式来添加todo项目,该项目在提交后会重置,但如果提交失败,它也会重置,我如何使我的模式保持打开状态,用户可以看到他们所犯的错误 //modal component onSubmit = e => { e.preventDefault(); const newTask = { task: this.state.task }; this.props.addTask(newTask) // sudo code below if(this.props
//modal component
onSubmit = e => {
e.preventDefault();
const newTask = {
task: this.state.task
};
this.props.addTask(newTask)
// sudo code below
if(this.props.addTask(newTask === 200 status success or something){
this.setState({task: "" })
//Close modal
this.toggle();
}
}
// action file
export const addTask = (task) => dispatch =>{
axios.post('/api/users/newtask', task )
.then(res =>
dispatch({
type: ADD_TASK,
payload: res.data
})
).catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
}
不确定是否有帮助,但我正在使用axios进行api调用您有两种方法: 可以传递到分派操作中的回调: 理想情况下,您应该通过redux操作/缩减器来实现这一点:
我假设这个.props.addTask是一个承诺?您可以共享该代码吗?是的,您可能还希望将错误存储在state中。@jaywhy13他在其分派操作GET中执行此操作_ERRORS@FrankerZ嘿,伙计,我一直在尝试解决这个问题,我的解决方案最初是有效的,但我注意到我必须按提交两次。你能看一下我的要点,帮我尽快解决吗?代码中任何地方都不应该有.toggle函数。您的州应该负责:您将布尔showmodel更改为false:模式被隐藏。让你的国家来负责。@frankerZ对不起,伙计,我以前没有做过这样的事,你能给我看看吗?
//modal component
onSubmit = e => {
e.preventDefault();
const newTask = {
task: this.state.task
};
this.props.addTask(newTask, () => {
this.setState({task: "" })
//Close modal
this.toggle();
});
}
// action file
export const addTask = (task, successCallback) => dispatch =>{
axios.post('/api/users/newtask', task )
.then(res => {
dispatch({
type: ADD_TASK,
payload: res.data
});
if (typeof successCallback === 'function') {
successCallback(res.data);
}
)
).catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
}
//modal component (Or don't render the modal at all at the parent component)
...
render() {
if (!this.props.showModal) {
return null;
}
}
// Action:
dispatch({
type: ADD_TASK,
payload: res.data
});
//Reducer
function reducer(state = initialState, action) {
switch (action.type) {
case ADD_TASK:
return Object.assign({}, state, {
tasks: [...state.tasks, action.task],
showModal: false, // <== Set show modal to false when the task is done.
})
default:
return state
}
}