在 Redux 中映射对象数组数据

Question

我正在使用 axios 和 redux 来处理 api 请求 returns 一个 response.data 对象数组。

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

Answer 1

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

您的用户减速器是

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

当你使用名称 "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>
  );
}

Answer 2

在 store 中，如果您的 users 是一个嵌套对象，您可以在 mapStateToProps 中解决这个问题。
它不仅告诉react/redux 你想要哪个数据，而且
如何 transform/map 表示数据在 redux 中的存储方式 store,
您希望它在 props 上的显示方式：

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

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

您可以查看的另一件事是数据如何从 API 中提取并存储到 redux store.
如果您的 API 为您提供嵌套数据（one 路由 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;
}

在 Redux 中映射对象数组数据

Mapping Object Array Data in Redux

javascript

mapping

object

reactjs

redux