Question

根据redux-form文档，如果您从处理表单提交的任何人返回了promise，则提交prop是true，直到promise得以解决/拒绝。

我正在尝试使用异步thunk来执行此操作，但是它不起作用。我以为这可能与babel重新生成异步信号有关，但是我已经关闭了所有功能并使用本机异步方法，但仍然无法正常工作。

所以我的表单是这样连接的：

const enhance = compose(
  connect(mapStateToProps, {
    createPosition
  }),
  reduxForm({
    validate,
    form: 'PositionForm',
    enableReinitialize: true,
    keepDirtyOnReinitialize: true,
    destroyOnUnmount: false
  })
)

export default enhance(PositionForm)

组件将提交如下表单：

...
onSubmit(values) {
    return this.props.createPosition(values);
}

render() {
return (
...
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
</form>
)}

我的重击（createPosition）是

export const createPosition = positionParams => async dispatch => {
  dispatch({ type: WAITING_ON_SERVER });
  try {
    const response = await axios.post(`${POSITION_API}/new`, positionParams);
    dispatch({ type: POSITION_CREATED, payload: response.data });
    dispatch(reset('PositionForm'));
  } catch (error) {
    dispatch(positionError(findErrorMessage(error)));
  }
  dispatch({ type: FINISHED_WAITING_ON_SERVER });
};

当我观察到组件的重新渲染时，我看到Submitting设置为true，但是在async方法完成之前很久就立即提交false来重新渲染。

如果我将此更改更改为

export const createPosition = positionParams => dispatch => {

  return axios.post(`${POSITION_API}/new`, positionParams).then(response => {
    dispatch({ type: WAITING_ON_SERVER });
    dispatch({ type: POSITION_CREATED, payload: response.data });
    dispatch(reset('PositionForm'));
    dispatch({ type: FINISHED_WAITING_ON_SERVER });

  }).catch(error => {
    dispatch(positionError(findErrorMessage(error)));
    dispatch({ type: FINISHED_WAITING_ON_SERVER });
  })
};

然后我看到在诺言解决之前，提交都是真实的。

如果我遵循触发的动作，我会在第一个画面中看到： @@ redux-form / START_SUBMIT +00：00：00（将提交值添加到表单状态） @@ redux-form / INITIALIZE +00：00：04（从表单状态中删除提交值）

在第二个thunk示例中，从不调度INITIALIZE操作。那么我对async / await的缺失是什么-我以为async关键字意味着它总是返回一个诺言-因此这两个thunk基本上不是完全相同的吗？

如何在异步表单提交中使用异步/等待承诺

0 个答案: