Redux异步API调用then中response未定义及API响应重定向问题

看起来你在Redux异步处理和页面重定向这两块碰到了麻烦，我来帮你梳理下问题所在和解决办法：

为什么then里会拿到undefined？ #

最常见的原因是你的Thunk action没有正确返回API调用的Promise，或者没有把响应数据传递出来。Redux Thunk允许你返回Promise，但如果action里没做好这一步，组件调用createJob().then(resp => ...)时，resp自然就是undefined。

正确实现异步调用+响应式重定向的步骤 #

第一步：修正你的Thunk Action #

首先确保createJob这个action正确返回包含API响应的Promise，并且在成功/失败时正确处理数据传递：

// jobAction.js
import axios from 'axios';

export const createJob = (jobData) => {
  // 返回一个异步函数（Thunk）
  return async (dispatch) => {
    try {
      // 发起API请求并等待响应
      const response = await axios.post('/api/jobs', jobData);
      
      // 分发成功的action到reducer
      dispatch({
        type: 'CREATE_JOB_SUCCESS',
        payload: response.data
      });
      
      // 关键：返回response，让组件能拿到完整的响应对象
      return response;
    } catch (error) {
      // 分发失败的action
      dispatch({
        type: 'CREATE_JOB_FAILURE',
        payload: error.response?.data || '创建职位失败'
      });
      
      // 抛出错误，让组件的catch能捕获到异常
      throw error;
    }
  };
};

如果习惯用.then而非async/await，也要确保返回整个Promise链并传递响应：

export const createJob = (jobData) => {
  return (dispatch) => {
    // 一定要return这个axios请求
    return axios.post('/api/jobs', jobData)
      .then(response => {
        dispatch({ type: 'CREATE_JOB_SUCCESS', payload: response.data });
        return response; // 把响应传递给组件的then
      })
      .catch(error => {
        dispatch({ type: 'CREATE_JOB_FAILURE', payload: error });
        throw error; // 抛出错误供组件处理
      });
  };
};

第二步：修正组件中的提交逻辑 #

你的组件代码里this.props.creat应该是笔误，改成this.props.createJob，然后用async/await或者.then来等待响应并执行重定向：

// jobForm.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createJob } from '~/actions/jobAction'
import { getUserId } from '~/utils'
import moment from 'moment'
import { withRouter } from 'react-router-dom'; // 引入withRouter

@withRouter // 包裹组件以获取history对象
@connect(state=>state.job,{createJob})
class Form extends Component {
  state = {
    formValues: {}, // 假设你用state存表单值
    errorMessage: ''
  };

  handleSubmitForm = async () => {
    try {
      // 收集表单数据，根据你的实际字段调整
      const jobData = {
        userId: getUserId(),
        createdAt: moment().format(),
        ...this.state.formValues
      };

      // 等待createJob完成，拿到响应
      const resp = await this.props.createJob(jobData);

      // 验证响应后执行重定向
      if (resp && resp.status === 201) { // 通常创建成功返回201状态码
        this.props.history.push('/jobs/list'); // 跳转到职位列表页
      }
    } catch (error) {
      // 处理错误，比如给用户提示
      console.error('创建职位出错:', error);
      this.setState({ errorMessage: error.response?.data?.message || '操作失败' });
    }
  };

  // 其他表单处理逻辑...

  render() {
    return (
      // 你的表单JSX，比如提交按钮绑定handleSubmitForm
      <>
        {this.state.errorMessage && <div className="error">{this.state.errorMessage}</div>}
        <button onClick={this.handleSubmitForm}>提交职位</button>
      </>
    );
  }
}

export default Form;

关键注意点 #

• 必须返回Promise：Thunk action里一定要返回API请求的Promise，否则组件无法通过.then或await拿到响应。
• 获取history对象：如果用React Router做重定向，类组件需要用withRouter高阶组件包裹才能拿到this.props.history；如果是函数组件，可以用useHistory钩子。
• 错误处理：一定要捕获异常，避免请求失败时代码卡住，同时给用户友好的提示。

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