Question

最初，我想在提交并关闭项目的编辑器表单组件之后刷新/重新获取列表组件中的项目。

旁注：在将Redux引入项目之前，我确实在handleSubmit之后在axios.put(...)函数中进行了路由，并且显然没有刷新列表，因为路由发生在异步调用完成之前。

以下代码片段显示了我如何使用箭头功能作为回调来在promise中进行路由：

在partDetail.js模块中

handleSubmit(event){
    event.preventDefault();
  let part =  this.props.part;
  this.props.updatePart(part, ()=>this.props.history.push('/home'));
    return false;
}

在partsActions.js模块中

export function updatePart(part, routeCallback){
    return function(dispatch) {
        dispatch({type: UPDATE_PART});
        axios.put(`${apiUrl}${part.id}`,part)
            .then(response => {
                routeCallback();
                //dispatch({type: UPDATE_PART_FULFILLED, payload: response.data})
            })
            .catch((error) => {
                console.log("updatePart failed submit error: '"+error+"'");
                dispatch({type: UPDATE_PART_REJECTED, payload: error})
            })
    }
}

但是我有强烈的感觉，这不是路由在React + Redux中成功调用异步视图的正确方法。请告知。

Answer 1

如果在操作updatePart上返回了承诺，则可以在then上使用handleSubmit：

handleSubmit(event){
  event.preventDefault();
  let { part, updatePart } = this.props; // <-- ES6 destructuring

  updatePart(part).then(() => this.props.history.push('/home'));
  return false;
}

在updatePart上，添加异步将返回一个Promise：

export async function updatePart(part)

如何在带有Redux应用程序的React中提交表单后正确路由

1 个答案: