지도 안의 API 호출하기

Question

필자는 redux를 사용하여 액션과 리듀서로 작성된 두 개의 API를 가지고있다. 첫 번째 API는 첫 번째 API에서 오는 사용자 ID를 기반으로 사용자 목록과 두 번째 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는, 내가 주 자바 스크립트 파일에서

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; 

안좋다이다, 나는 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()은 다음과 같습니다 : 나는 당신이 connect에 getProfile을 통과하지만, 볼

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

을 ... 그것이 가져올 수 없습니다. 의 xD

시도 :

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