使用redux-thunk获取数据时提示rentals未定义问题求助

开发者阿泽

2026-9-28

问题原因

你遇到的报错和redux-thunk、setTimeout都没有直接关系，是多个基础使用错误共同导致的：

action中rentals变量未定义
不管是thunk版本还是普通对象版本的action，你直接使用rentals变量，没有声明也没有赋值，这是报错“rentals未定义”的直接原因，你需要先获取到租房数据后再传入action。
dispatch调用thunk的返回值不是异步结果
当你用dispatch调用thunk异步函数时，dispatch不会返回你异步请求拿到的rentals数据，你现在写的const { rentals } = dispatch(action.getHouseSuccess())必然拿到undefined，异步结果会存到redux store中，需要通过mapStateToProps映射到组件props获取。
reducer存储结构和mapStateToProps取值不匹配
你在reducer里把数据存在了state.data字段，但是mapStateToProps里直接取state.rentals，自然取不到对应值。
组件参数写法错误，且同时混用useDispatch和connect两套写法
connect映射的props会直接作为组件的入参，不需要写{ props }，同时两种redux调用方式选一套即可，不需要同时使用。

修正后的代码参考

Action

// 先模拟你的rentals数据源，你可以换成自己的接口请求逻辑
const mockRentals = [
  {id: 1, name: 'XX小区两居室'},
  {id: 2, name: 'YY公寓一居室'}
]

export const getHouseSuccess = () => {
  return function (dispatch) {
    setTimeout(() => {
      dispatch({
        type: FETCH_HOUSE_SUCCESS,
        // 把实际的rentals数据传进去
        rentals: mockRentals
      });
    }, 1000);
  };
};

Reducer.js

// 初始值改成对象，和后续存储结构匹配
export const houseReducer = (state = {data: []}, action) => {
  switch (action.type) {
    case FETCH_HOUSE_SUCCESS:
      return { ...state, data: action.rentals };
    default:
      return state;
  }
};

Component

import * as action from "../actions";
import { useEffect } from "react";
import { connect } from "react-redux";

// connect映射的rentals直接作为组件参数
function House({ rentals, dispatch }) {
  useEffect(() => {
    // 只需要触发dispatch即可，不需要从返回值拿数据
    dispatch(action.getHouseSuccess());
  }, [dispatch]);

  // 直接用props里的rentals渲染即可，初始是空数组，异步请求完成后自动更新
  return (
    <div>
      {rentals.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}

function mapStateToProps(state) {
  return {
    // 从state对应字段取rentals，注意key和你注册reducer时的命名保持一致即可
    rentals: state.house.data,
  };
}

export default connect(mapStateToProps)(House);

补充说明

你之前写的普通action版本能运行的原因是，没有异步逻辑的时候，dispatch会直接返回你传入的action对象，所以你解构出来的rentals是action里的rentals，但本质上那个rentals未定义的问题依然存在，只是你可能在其他地方隐式声明了该变量没有贴全代码。

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