Redux中使用Axios提交表单数据至API失败问题求助

我帮你梳理了代码里几个关键的问题，这些应该就是导致编辑后的数据无法提交到API的原因，咱们一步步来修正：

1. submitEditedPost 调用时参数缺失 #

你更新后的 submitEditedPost 要求接收三个参数：id（帖子ID）、values（表单数据）、callback（回调函数），但在组件的 onSubmit 里，你只传了两个参数：

this.props.submitEditedPost(formData, () => {
  this.props.history.push('/');
});

缺少帖子ID会导致action里的请求URL变成 ${API}/posts/undefined，API根本找不到要编辑的资源，请求自然失败。

2. Axios PUT 请求的请求体格式错误 #

Axios 的 put 方法签名是 axios.put(url, 请求体数据, 配置对象)，你现在的写法把表单数据包在了额外的{values}对象里：

const request = axios.put(`${API}/posts/${id}`, {values}, {headers});

这样API收到的是嵌套结构（比如{values: {title: "xxx", content: "xxx"}}），而不是它期望的扁平表单数据，肯定无法正确处理。应该直接传递values作为请求体。

3. 请求头的认证配置错误 #

你定义请求头时，把Authorization的值写成了字符串'token'，而不是你生成的token变量：

const headers = {
  'Accept' : 'application/json',
  'Authorization' :'token' // 这里应该用变量token，不是字符串字面量
}

这会导致API认证失败，直接拒绝你的请求。

4. 冗余的表单数据构建（redux-form 用法不当） #

既然用了redux-form，onSubmit方法的values参数已经包含了所有表单字段的值，完全不需要手动通过this.refs去构建formData——这不仅多余，还可能和redux-form维护的表单数据不一致。

修正后的完整代码示例 #

1. 修正 submitEditedPost Action Creator #

// Action creator for submitting edited post
export function submitEditedPost(id, values, callback) {
 console.log(values, 'values')
 console.log(id, 'id')
 // 修正：直接传递values作为请求体，headers放在配置对象中
 const request = axios.put(`${API}/posts/${id}`, values, {headers});
 return dispatch => {
   return request.then((res) => {
     callback();
     console.log("response", res)
     dispatch({ type:SUBMIT_POST, payload: res })
   })
   // 新增错误捕获，方便排查问题
   .catch(err => {
     console.error('提交失败详情:', err.response?.data || err.message);
   })
 }
}

2. 修正请求头配置 #

let token ;
if(!token) token = localStorage.token = Math.random().toString(36).substr(-8)
const API = 'http://localhost:3001';
const headers = {
 'Accept' : 'application/json',
 'Authorization' : token // 改为使用token变量
}

3. 修正组件的 onSubmit 方法 #

假设你的帖子ID是从路由参数获取的（比如this.props.match.params.id，如果用了react-router），修正调用逻辑：

onSubmit(values) {
  // 从props/路由中获取要编辑的帖子原有ID，不要生成随机ID
  const postId = this.props.match.params.id; 
  // 传递完整的三个参数：id、values、callback
  this.props.submitEditedPost(postId, values, () => {
    this.props.history.push('/');
  });
}

额外小贴士 #

• 一定要添加.catch捕获请求错误，这样能在控制台看到API返回的具体错误信息（比如401认证失败、404资源不存在、400参数错误等），排查问题效率会高很多。
• 编辑帖子时要用帖子原有的ID，不要生成随机ID——随机ID会让你请求一个不存在的资源，API肯定返回404。

内容的提问来源于stack exchange，提问作者pranami