在Redux中映射对象数组数据

Mapping Object Array Data in Redux

本文关键字：数组 数据 对象 映射 Redux      更新时间：2023-09-26

我使用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。如果我把它转换成字符串并映射它会更好吗？我的映射显示为空白。

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

您的用户缩减器是

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>
  );
}

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

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

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

您还可以了解数据是如何从API中提取并存储到redustore中的
如果您的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;
}
相关文章：