映射數組中的問題

Question

我正在嘗試創建一個React應用程序。我在映射中遇到了一些問題。 我提供了有關我的問題的詳細信息。

問題在映射：

動作/ 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 
           }); 


         }) 
       } 
      } 

動作/ types.js

  export const FETCH_USERIDS='fetch_userids'; 

減速器/ 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; 
     } 

減速器/ 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 ] 

但同時加入映射函數它示出了和error.The控制檯贏得」 t顯示陣列對象。如何將其映射到列表中顯示？請幫助我

Answer 1

this.props.users最初是未定義的，因此您需要在映射前進行檢查

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