javascript - 映射数组的问题

Question

我正在尝试创建一个 React 应用程序。我在映射方面遇到了一些问题。我已提供有关我的问题的详细信息。

映射问题:

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

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

reducer /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;

组件/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);

以下是 JavaScript 控制台中显示的输出:

             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 ]

但是在添加 map 功能时显示错误。控制台不会显示数组对象。如何映射以将其显示在列表中？请帮助我

Answer 1

this.props.users 最初是未定义的，因此您需要在映射之前进行检查

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