在 Redux 中映射对象数组数据答案

【问题标题】：Mapping Object Array Data in Redux在 Redux 中映射对象数组数据
【发布时间】：2016-08-24 01:38:21
【问题描述】：

我将 axios 和 redux 用于返回 response.data 的 api 请求，它是一个对象数组。

我的action reducer如下：

export default function(state = [], action) {
  switch (action.type) {
     case FETCH_USERS:
         console.log(action.payload.data)
         return { ...state, users: action.payload.data };
       }
  return state;
}

console.log 在 chrome 控制台中返回这个

 [object, object]

我的问题是如何映射对象的数据。我在映射数组的地方尝试了以下操作。（users是对象数组的prop。）

  ....
 {this.props.users.map(this.renderUser)}
 ...

 renderUser(user) {
  return (
    <tr>
      <td> {user.contact_name}</td>
      <td> {user.contact_email}</td>
    </tr>
  );
}

当我使用 React 控制台检查我的道具时，我得到以下信息：

users: {...}
   users: 
      0:{...}
      1:{...}

我不确定如何将对象映射到 html。如果我将它转换为字符串并映射它会更好吗？我的映射显示为空白。

【问题讨论】：

你没说，但你有什么问题？你的映射不起作用？
@QoP 抱歉，我编辑了我的帖子。我的映射不起作用并显示为空白。
你是如何将你的 redux 状态映射到你的组件的？
函数 mapStateToProps(state) { return { users: state.users }; } 导出默认连接（mapStateToProps，动作）（用户）；我正在使用 React 插件，并且道具似乎存在，所以我认为这可能是映射问题
查看答案：-P

标签： javascript object reactjs mapping redux

【解决方案1】：

您的问题是您的状态与您的数组同名，这让您感到困惑。

你的用户减速器是

const initialState = {
   ....
   users : []
}

当您使用名称“用户”将其映射到您的道具时，您得到的是

this.props.users = initialState

所以为了访问你需要使用的用户

this.props.users.users

也就是说，访问您的用户的方式是这样的。

  ....
 {this.props.users.users.map(this.renderUser)}
 ...

 renderUser(user) {
  return (
    <tr>
      <td> {user.contact_name}</td>
      <td> {user.contact_email}</td>
    </tr>
  );
}

【讨论】：

这很有意义，但是当我执行 this.props.users.users.map 时出现错误 Uncaught TypeError: Cannot read property 'users' of undefined。可能还有其他原因导致此问题，但感谢您的建议
你有初始状态吗？
reducer 的导出默认函数(state = [], action) 会是初始状态吗？
是的，但不包含用户，state = { users : []} 会是一个更好的主意。您可能在获取数据之前访问了您的 users.users 并且用户不存在，这就是您收到该错误的原因
似乎有更好的底层映射修复。我不确定它是什么。我也发生了同样的事情，而不是检查 this.props.users.users 是否存在，我宁愿总是能够依赖 this.props.users

【解决方案2】：

在store 中，如果您的users 是嵌套对象，您可以在mapStateToProps 中解决此问题。
它不仅告诉 react/redux 你想要哪些数据，而且，
如何从它在 redux store 中的存储方式转换/映射所述数据，
您希望它在props 上的显示方式：

mapStateToProps( store ){
  return {
    users: store.users.users,
  }
}

现在，在您的组件中，您可以访问并映射您的 users（数组）为 this.props.users，而不是 this.props.users.users。

您可以查看的另一件事是如何从 API 中提取数据并将其存储到 redux store。
如果您的 API 为您提供嵌套数据（我正在使用的 API 上的一个路由，奇怪的是这样做了）。

在那种情况下.. 为了使您的 props/state/store 对象具有预期的格式，请更改此行：

return { ...state, users: action.payload.data };

对此：

return { ...state, users: action.payload.data.users };

完整的函数如下所示：

export default function(state = [], action) {
  switch (action.type) {
     case FETCH_USERS:
         console.log(action.payload.data)
         return { ...state, users: action.payload.data.users };
       }
  return state;
}

【讨论】：