Fetch Post请求返回200但无负载，redux-form创建用户遇异常

看起来你遇到的问题很典型：后端接口没问题（Postman能正常返回用户对象），但前端通过redux-form提交后，拿不到预期的用户数据，没法执行后续的页面跳转。核心问题肯定出在前端的请求处理、Redux action逻辑或者表单提交的回调上，我给你一步步分析：

1. 先检查API Manager里的Fetch请求处理 #

你用的是whatwg-fetch，一定要确保正确解析了后端返回的JSON响应，而不是直接返回Response对象或者其他无关内容。比如你的Apimanager.js里的创建用户方法应该是这样的：

// Apimanager.js 示例代码
export const createUser = (userData) => {
  return fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 如果后端需要认证，别忘了加Authorization头
    },
    body: JSON.stringify(userData),
  })
  .then(res => {
    // 先判断响应状态是否成功
    if (!res.ok) {
      throw new Error(`请求失败: ${res.status}`);
    }
    // 关键步骤：把响应解析成JSON，这才是后端返回的用户对象
    return res.json();
  });
};

如果这里没有做res.json()处理，你拿到的就会是Fetch的Response对象，而不是真正的用户数据。

2. 确保Redux Action正确返回用户对象 #

因为你用了redux-thunk，异步action需要返回Promise，这样表单提交后才能拿到结果。你的action.js里的创建用户action应该这样写：

// action.js 示例代码
export const CREATE_USER_SUCCESS = 'CREATE_USER_SUCCESS';
export const CREATE_USER_FAILURE = 'CREATE_USER_FAILURE';

export const createUser = (userData) => {
  return (dispatch) => {
    // 返回Promise，让外部能链式调用
    return apiManager.createUser(userData)
      .then(createdUser => {
        // 分发成功action，把用户对象存到Redux store
        dispatch({
          type: CREATE_USER_SUCCESS,
          payload: createdUser
        });
        // 这里把用户对象返回，让表单提交的回调能拿到
        return createdUser;
      })
      .catch(error => {
        dispatch({
          type: CREATE_USER_FAILURE,
          payload: error.message
        });
        // 抛出错误，让外部的catch能捕获
        throw error;
      });
  };
};

如果action里没有返回createdUser，或者没有正确传递Promise，表单提交的回调就拿不到用户数据。

3. 正确处理Redux-Form的提交回调 #

在你的表单组件里，使用handleSubmit的时候，要等待action执行完成，然后拿到返回的用户对象再跳转：

// 表单组件示例代码
import { reduxForm } from 'redux-form';
import { createUser } from './actions';
import { withRouter } from 'react-router-dom'; // 如果用React Router跳转

const UserForm = ({ handleSubmit, history, error }) => {
  const onSubmit = (formData) => {
    // 调用action并等待Promise完成
    return handleSubmit(formData)
      .then(createdUser => {
        // 这里就能拿到创建好的用户对象了
        console.log('创建的用户:', createdUser);
        // 跳转到目标页面，比如用户列表页
        history.push('/users');
      })
      .catch(err => {
        // 处理提交失败的情况
        console.error('创建用户失败:', err);
      });
  };

  return (
    <form onSubmit={onSubmit}>
      {/* 你的表单字段 */}
      {error && <div className="error">{error}</div>}
      <button type="submit">创建用户</button>
    </form>
  );
};

export default withRouter(reduxForm({ form: 'createUser' })(UserForm));

另外，确保你用reduxForm包装组件时，没有错误拦截返回值，或者在onSubmit里正确返回了action的Promise。

4. 排查Redux Store的Reducer处理 #

最后，检查你的reducer是否正确处理了CREATE_USER_SUCCESS action，把用户对象存到store里（虽然你主要是要跳转，但确保数据能正确存储也很重要）：

// reducer.js 示例代码
const initialState = {
  users: [],
  error: null
};

export default (state = initialState, action) => {
  switch(action.type) {
    case CREATE_USER_SUCCESS:
      return {
        ...state,
        users: [...state.users, action.payload],
        error: null
      };
    case CREATE_USER_FAILURE:
      return {
        ...state,
        error: action.payload
      };
    default:
      return state;
  }
};

按照这几步排查，应该就能解决问题了——核心就是确保前端正确解析后端的JSON响应，action正确传递用户数据，并且表单提交时能拿到action返回的Promise结果来执行跳转。

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