javascript - Mapping Object Array Data in Redux - Stack Overflow

admin管理员组

文章数量:1324231

I'm using axios and redux for an api request that returns a response.data which is an array of objects.

My action reducer is as follows:

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

The console.log returns this in the chrome console

 [object, object]

My problem arises to how I can map the data of objects. I tried the following where I mapped the array. (Users is the prop of the object array.)

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

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

When I use the React console to check my props i get the following:

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

I'm not sure how to map the objects to html. Would it be better if I converted it to string and mapped that? My mapping appears blank.

I'm using axios and redux for an api request that returns a response.data which is an array of objects.

My action reducer is as follows:

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

The console.log returns this in the chrome console

 [object, object]

My problem arises to how I can map the data of objects. I tried the following where I mapped the array. (Users is the prop of the object array.)

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

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

When I use the React console to check my props i get the following:

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

I'm not sure how to map the objects to html. Would it be better if I converted it to string and mapped that? My mapping appears blank.

• javascript
• object
• reactjs
• mapping
• redux

Share Follow edited Apr 29, 2016 at 3:53 lost9123193 asked Apr 29, 2016 at 3:32 lost9123193lost9123193 11k2727 gold badges8383 silver badges125125 bronze badges 5

• You didn't say it but what's your problem? your mapping doesn't work? – QoP Commented Apr 29, 2016 at 3:48
• @QoP sorry, I edited my post. My mapping does not work and appears blank. – lost9123193 Commented Apr 29, 2016 at 3:51
• how are you mapping your redux state to your ponent? – QoP Commented Apr 29, 2016 at 3:52
• function mapStateToProps(state) { return { users: state.users }; } export default connect(mapStateToProps, actions)(Users); I'm using the React plugin and the props seem to be present so I think it might be a mapping issue – lost9123193 Commented Apr 29, 2016 at 3:54
• check the answer :-P – QoP Commented Apr 29, 2016 at 3:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your problem is that your state has the same name as your array and that is confusing you.

Your users reducer is

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

when you map it to your props using the name "users" what you got is

this.props.users = initialState

so in order to access to users you need to use

this.props.users.users

That said, the way to access to your users is like this.

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

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

In store, if your users is a nested object, you can fix this in mapStateToProps.
It not only tells react/redux which data you want but also,
how to transform/map said data from the way it is stored in the redux store,
to how you'd like it to appear on props:

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

Now, within your ponent, you can access and map over your users (array) as this.props.users, rather than this.props.users.users.

---

Another thing that you could look at is how data is being pulled from the API and stored into the redux store.
If your API is giving you nested data (one route on an API I was using, oddly did this).

In that case.. In order to have your props/state/store object in the expected format, change this line:

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

to this:

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

The full function will look like this:

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

本文标签： javascriptMapping Object Array Data in ReduxStack Overflow