redux-form提交无效表单触发422错误，API未收到数据求助

我来帮你梳理下几个实用的排查方向，解决你遇到的表单提交422（invalid form）错误，以及API请求没发送的问题：

• 先确认createPostGroup action creator的实现逻辑
  你在组件里已经能拿到dataForm并打印出来，但dispatch之后没触发API请求，大概率是这个action creator的问题：

  • 如果它是异步action（需要发API请求），得确认有没有用到redux-thunk这类异步中间件——要是没配置中间件，dispatch普通函数是不会被执行的；
  • 在createPostGroup函数里加个console.log，看看它有没有被调用，传入的参数是不是和组件里打印的dataForm一致。

• 核对表单数据和API的要求是否匹配
  422错误几乎都是请求格式合法，但数据不符合API的校验规则：

  • 把你打印的dataForm字段和API文档里的请求体结构逐一对比，比如API要求字段名是group_name，但你传的是驼峰式的groupName；或者某个必填字段为空、数据类型不对（比如API要数字你传了字符串）；
  • 检查请求的Content-Type是不是application/json——如果用fetch/axios发送请求，要确保请求体用JSON.stringify()转换，同时设置正确的请求头。

• 检查网络请求的实际情况
  打开浏览器开发者工具的Network标签，过滤XHR/Fetch请求：

  • 如果能看到对应的API请求，查看请求的Payload里的数据是否正确，Response里的详细错误信息（很多API会返回具体哪个字段不合法）；
  • 如果完全看不到请求，那问题肯定出在action creator或者Redux中间件的配置上，比如中间件没装、action里的API调用代码写错了。

• 排查action里的API调用代码
  要是createPostGroup里写了fetch/axios请求，仔细检查这些细节：

  • 请求URL是否正确，有没有拼写错误；
  • 请求方法是不是POST（别写成GET了）；
  • 请求体是否正确处理，比如：

    // 正确的POST请求示例
    axios.post('/api/groups', dataForm, {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    

• 确认Redux store的中间件配置
  如果你用了异步action，必须在创建store时加入redux-thunk或者redux-saga这类中间件，否则dispatch的异步函数不会被处理，自然不会触发API请求。比如：

  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import rootReducer from './reducers';
  
  const store = createStore(rootReducer, applyMiddleware(thunk));
  

内容的提问来源于stack exchange，提问作者Novice-Dev