admin管理员组文章数量:1323323
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.
Share edited Apr 29, 2016 at 3:53 lost9123193 asked Apr 29, 2016 at 3:32 lost9123193lost9123193 11k27 gold badges83 silver badges125 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
2 Answers
Reset to default 3Your 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
版权声明:本文标题:javascript - Mapping Object Array Data in Redux - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742143095a2422670.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论