Redux新手求助：REST获取数据后无法渲染，map调用返回undefined

作为Redux新手碰到这种问题很常见，我帮你一步步拆解问题所在，结合你的代码来分析：

核心问题：API返回数据结构未正确提取 #

首先看你调用的https://reqres.in/api/users?page=2接口，它的返回结构是一个包含data数组的对象，而不是直接返回数组：

{
  "page": 2,
  "per_page": 6,
  "total": 12,
  "total_pages": 2,
  "data": [/* 用户数组 */]
}

但你的action里直接把整个response传给了fetchUsersList，也就是：

.then(response => dispatch(fetchUsersList(response)))

这就导致Redux的state里存储的是完整的响应对象，而不是里面的data数组——对象当然没有map方法，所以你调用users.map时会报错或者返回undefined。

分步修正方案 #

1. 修正Action中的数据提取 #

修改fetchUsersListRequest里的dispatch逻辑，只传递response.data（也就是真正的用户数组）：

export function fetchUsersListRequest(url) {
  return(dispatch)=> {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText);
        }
        return response;
      } )
      .then(response => response.json())
      // 这里改成传递response.data
      .then(response => dispatch(fetchUsersList(response.data)))
  }
}

2. 给组件添加数据加载状态判断 #

因为Redux的异步更新是需要时间的，组件初始渲染时users还是空数组（你的reducer初始值），但为了更健壮，可以加个判断避免意外报错：

render() {
  const {users} = this.props;
  
  // 先判断是否为有效数组
  if (!Array.isArray(users) || users.length === 0) {
    return <div>加载中...</div>;
  }

  return (
    <div className="apiList">
      <ul>
        {/* 注意给map的元素加key属性，React要求 */}
        {users.map(userItem => <li key={userItem.id}>{userItem.email}</li> )}
      </ul>
    </div>
  );
}

3. 调试验证（可选但推荐） #

如果之后还有问题，可以通过打印来确认数据流向：

• 在reducer里打印传入的action数据：

  export default function usersList(state = initialState, action) {
    switch(action.type) {
      case "USERS_LIST_DATA":
        console.log("Reducer收到的用户数据：", action.users);
        return action.users
      default:
        return state;
    }
  }
  

• 在组件的componentDidUpdate里打印props变化：

  componentDidUpdate(prevProps) {
    if (prevProps.users !== this.props.users) {
      console.log("组件收到的users props：", this.props.users);
    }
  }
  

额外注意点 #

• 你的mapStateToProps里写了states: state.cars，但组件里没用到，这个可以忽略或者删掉，不影响当前问题。
• Redux-Thunk的配置是正确的，你已经在store里添加了中间件，异步action能正常触发。

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