マップ内のAPI呼び出し

Question

私は、reduxを使ってアクションとレデューサーで書かれた2つのAPIを持っています。最初のAPIは最初のAPIから来るユーザーIDに基づいてユーザーのリストと2番目のAPIをフェッチします。 が

export const GET_EXPERT_LIST='GET_EXPERT_LIST'; 
export const GET_PROFILE_PHOTO='GET_PROFILE_PHOTO'; 
export const getExpertList=()=>{ 
    return(dispatch)=>{ 
     axios({ 
      method:'POST', 
      url:Constants.URLConst+"/xyz", 
      headers:Constants.headers, 
      data:{ 
       "PageNum" : 1, 
      } 
     }).then((response)=>{ 
      return dispatch({ 
       type:GET_EXPERT_LIST, 
       response 
      }) 

     }).catch((error)=>{ 
      console.log(error); 
     }) 
    } 
} 

export const getProfile=(userid)=>{ 
    return(dispatch)=>{ 
     axios({ 
      method:'GET', 
      url:Constants.URLConst+"/UserProfileImage?enterpriseId="+userid, 
      headers:Constants.headers 
     }).then((response)=>{ 
      dispatch({ 
       type:GET_PROFILE_PHOTO, 
       response 
      }) 
     }).catch((error)=>{ 
      console.log(error); 
     }) 
    } 
} 

そしてreducer.jsで

をaction.js次のように

APIは、私がメインのJavaScriptファイルで

import {combineReducers} from 'redux'; 
import {ASK_EXPERT_DATA,GET_EXPERT_LIST,GET_PROFILE_PHOTO} from '../actions/ProfilePageActions.js'; 

export function getExpertList(state={},action){ 
    switch(action.type){ 
     case GET_EXPERT_LIST: 
      return {...state, ...action.response} 
      default: 
       return state 
    } 
} 

export function getProfile(state={},action){ 
    switch(action.type){ 
     case GET_PROFILE_PHOTO: 
      return {...state, ...action.response} 
      default: 
       return state 
    } 
} 

const data=combineReducers({ 
    getExpertList, 
    getProfile 
}) 

export default data; 

をhave-あり、私はcomponentDidMountの最初のAPIをコールしています、 最初のAPIからmap（）を使って表示している配列が返されて以来。

だから、

import React,{Component} from 'react'; 
import ReactDom from 'react-dom'; 
import {getExpert,getExpertList} from './actions/ProfilePageActions.js'; 
import {connect} from 'react-redux'; 
import theme from './assets/react-toolbox/theme'; 
import ThemeProvider from 'react-toolbox/lib/ThemeProvider'; 
import Card from 'react-toolbox/lib/card/Card.js'; 
import CardTitle from 'react-toolbox/lib/card/CardTitle'; 
import CardMedia from 'react-toolbox/lib/card/CardMedia'; 
import Chip from 'react-toolbox/lib/chip/Chip.js'; 
import CardText from 'react-toolbox/lib/card/CardText'; 

class FindExpert extends Component{ 

    state={ 
     countries: ['ES-es', 'TH-th'], 
     source:[], 
     valueSelected:[], 
     experts:[] 
    } 

    componentDidMount(){ 
     this.props.getExpertList(); 
    } 

    componentWillReceiveProps(nextProps){ 

     if(nextProps.get_Expert_List && nextProps.get_Expert_List.data){ 
      this.setState({ 
       experts:[...nextProps.get_Expert_List.data.Experts] 
      }) 
     } 
    } 

    getExpertInfo(){ 
     var i=1; 
     if (this.state.experts && this.state.experts.length) { 
      this.test = this.state.experts.map((expertUSer)=> { 
       this.props.getProfile(expertUSer.UserId); 
       console.log(this.props.get_profile); 
       return(
        <ThemeProvider theme={theme} key={i++}> 
         <Card className='experts'> 

          <CardTitle title={expertUSer.Name} 
           subtitle={expertUSer.Designation}/> 
          <CardText>{expertUSer.Country}</CardText> 
         </Card> 
        </ThemeProvider> 
        ) 
      }); 

      return this.test; 
     } 
     return null; 
    } 

    render(){ 
     if(this.props.ask_expert.data){ 
      return(
       <div className='expert-div' id='expert-div'>{this.getExpertInfo()}</div> 
        ) 
     }else{ 
      return null; 
     } 
    } 
} 

const mapStateToProps=(state)=>{ 
    console.log({getExpert: state.getProfile}); 
    return{ 
     get_Expert_List:state.getExpertList, 
     get_profile:state.getProfile 
    } 
} 

export default connect(mapStateToProps,{ 
    getExpertList, 
    getProfile 
})(FindExpert); 

、getExpertListのデータでは、私はthis.props.getProfile(expertUSer.UserId);に個々user.ButのユーザーIDを渡すことではGetProfileを呼び出しています、私は

はGetProfileが機能

ないというエラーを取得します

ここで何をすべき？

パス現在のコンテキストをマップする

Answer 1

：

this.state.experts.map(function(expertUSer) {...}, this) 

だからあなたgetExpertInfo()は次のようになります。

getExpertInfo(){ 
    var i=1; 
    if (this.state.experts && this.state.experts.length) { 
     this.test = this.state.experts.map((expertUSer)=> { 
      this.props.getProfile(expertUSer.UserId); 
      console.log(this.props.get_profile); 
      return(
       <ThemeProvider theme={theme} key={i++}> 
        <Card className='experts'> 

         <CardTitle title={expertUSer.Name} 
          subtitle={expertUSer.Designation}/> 
         <CardText>{expertUSer.Country}</CardText> 
        </Card> 
       </ThemeProvider> 
       ) 
     }, this); 

     return this.test; 
    } 
    return null; 
} 

Answer 2

私はあなたがそれがインポートされていないconnectでgetProfileを渡しますが...ていることがわかります。 xDさん

試してみてください。

import {getExpert,getExpertList, getProfile} from './actions/ProfilePageActions.js';