首页 文章

在Redux中映射对象数组数据

提问于
浏览 次
3

我正在使用axios和redux来获取api请求，该请求返回一个response.data，它是一个对象数组 .

我的动作减速器如下：

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]

我的问题出现在我如何映射对象的数据上 . 我尝试了以下映射数组的地方 . （用户是对象数组的支柱 . ）

....
 {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 . 如果我将它转换为字符串并映射它会更好吗？我的映射显示为空白 .

javascript object reactjs mapping redux

2 回答

  • 3

    您的问题是您的州名与您的阵列同名，这让您感到困惑 .

    您的用户减速机是

    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>
  );
}
    回复于
  • 1

    在 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上的一个路由，奇怪的是这样做） .

    在这种情况下..为了使您的道具/州/商店对象具有预期的格式，请更改此行：

    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;
}
    回复于

相关问题