在 onSubmit 上使用 redux 操作时如何管理 React final form 上的提交错误？

Question

我试图从 redux 表单迁移到 React final 表单，并且一直面临处理 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 最终形式实现相同目标的最佳方法是什么？

Answer 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;
  }

在 onSubmit 上使用 redux 操作时如何管理 React final form 上的提交错误？

How to manage submission errors on react final form when using a redux action on onSubmit?

reactjs

redux

react-final-form