I am trying to create a React application.I am facing some issues in mapping. I have provided details regarding my issue.
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
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>
))}