Crissi Mariam Robert Crissi Mariam Robert - 2 months ago 13
Javascript Question

Issue in mapping arrays

Issue in mapping :

actions/index.js

export function fetchUserIds(){
return function(dispatch){
axios.get(`${ROOT_URL}/userids`,{
headers:{ authorization: localStorage.getItem('token')}
} )
.then( response => {
console.log(response);
console.log(response.data);

dispatch({
type:FETCH_USERIDS,
payload:response.data
});


})
}
}


actions/types.js

export const FETCH_USERIDS='fetch_userids';


reducers/auth_reducer.js

import {
AUTH_USER,
UNAUTH_USER,
AUTH_ERROR,
FETCH_MESSAGE,
FETCH_USERIDS
} from '../actions/types';


export default function (state = {},action){
console.log(action);
switch(action.type){
case AUTH_USER:
return {...state, error:'',authenticated:true};
case UNAUTH_USER:
return {...state,authenticated:false};
case AUTH_ERROR:
return {...state,error:action.payload};
case FETCH_MESSAGE:
return {...state,message:action.payload};
case FETCH_USERIDS:
return {...state,userids:action.payload};

}
return state;
}


reducers/index.js

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import authReducer from './auth_reducer';

const rootReducer = combineReducers({
form, //form:form
auth:authReducer
});

export default rootReducer;


components/feature.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
import UserLists from './userlists';


class Feature extends Component {


componentWillMount(){

console.log(this.props);
this.props.fetchUserIds();
}



render(){
console.log(this.props);
console.log(this.props.users);

return (
<div>

{this.props.users.map((userids, index) => (
<p key={index}>Hello, {userids.userid} </p>
))}

</div>
);
}
}

function mapStateToProps(state){
console.log(state);
console.log(state.auth.userids);

return { users:state.auth.userids};
}

export default connect(mapStateToProps,actions)(Feature);


The following is the output displayed in javascript console:

Object { type: "@@redux/INIT" } bundle.js:34560:5
Object { type: "@@redux/PROBE_UNKNOWN_ACTION_x.l.j.…" } bundle.js:34560:5
Object { type: "@@redux/INIT" } bundle.js:34560:5
Object { type: "auth_user" } bundle.js:34560:5
Object { form: Object, auth: Object } bundle.js:34385:6
undefined bundle.js:34386:6
Object { history: Object, location: Object, params: Object, route: Object, routeParams: Object, routes: Array[2], children: null, authenticated: true, dispatch: createThunkMiddleware/</</<(), users: undefined, 8 more… } bundle.js:34364:14
Object { history: Object, location: Object, params: Object, route: Object, routeParams: Object, routes: Array[2], children: null, authenticated: true, dispatch: createThunkMiddleware/</</<(), users: undefined, 8 more… } bundle.js:34370:14
undefined bundle.js:34371:14
Object { data: Array[5], status: 200, statusText: "OK", headers: Object, config: Object, request: XMLHttpRequest } bundle.js:32514:14
Array [ Object, Object, Object, Object, Object ] bundle.js:32515:14
Object { type: "fetch_userids", payload: Array[5] } bundle.js:34560:5
Object { form: Object, auth: Object } bundle.js:34385:6
Array [ Object, Object, Object, Object, Object ] bundle.js:34386:6
Object { history: Object, location: Object, params: Object, route: Object, routeParams: Object, routes: Array[2], children: null, authenticated: true, dispatch: createThunkMiddleware/</</<(), users: Array[5], 8 more… } bundle.js:34370:14
Array [ Object, Object, Object, Object, Object ]


But while adding map function it shows the error.The console won't display the array objects.How can I map to display it in list?Please help me

Answer Source

this.props.users is undefined initially so you need to put a check before mapping

{this.props.users && this.props.users.map((userids, index) => (
     <p key={index}>Hello, {userids.userid}</p>
 ))}