在 onSubmit 上使用 redux 操作时，如何管理反应最终表单上的提交错误？答案

【问题标题】：How to manage submission errors on react final form when using a redux action on onSubmit?在 onSubmit 上使用 redux 操作时，如何管理反应最终表单上的提交错误？
【发布时间】：2021-10-25 14:32:20
【问题描述】：

我试图从 redux 表单迁移到响应最终表单，并且在处理 redux 操作的提交错误时遇到了问题。我的 onSubmit 看起来像：

  onSubmit = formValues => {
this.props.login(formValues);
};

我的登录操作是：

export const login = ({ username, password }) => async dispatch => {
  
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };

  
  const body = JSON.stringify({ username, password });

  try {
    const res = await axios.post('/api/auth/login', body, config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: LOGIN_FAIL
    });
    
  }
};

以前在使用 redux 表单时，我使用 stopSubmit 来显示提交错误。使用 react final 形式实现相同目标的最佳方法是什么？

【问题讨论】：

标签： reactjs redux react-final-form

【解决方案1】：

我很快就解决了这个问题。

必须将 onSubmit 更改为：

onSubmit = values => {
    let errors = this.props.login(values);
    return errors.then(result => result);
  };

和登录操作创建者：

try {
    const res = await axios.post('/api/auth/login', body, config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: LOGIN_FAIL
    });
    return err.response.data;
  }

【讨论】：