ReactJS의 중첩 된 함수 조작

Question

화면에 다음 코드를 반환하려고합니다. 내가 배열이 상위 기능에 의해 따라서으로 반환 할 JobDisplayFunction에서 반환받을 수 없습니다를 제외하고 모든 것이 잘 작동 렌더링() 비동기 기능이이 약속을 반환이라고, 중 자사가 약속을 이행

async renderJobs(){ 
    //do stuff 
    this.apiclient.getJobsByEmployer('', async (error, returnVal) => { 
    var job = returnVal 
    console.log('job') 
    console.log(job) //prints 
    console.log('returnVal') 
    console.log(returnVal) //prints 
    jobDisplayFunction(job) 
}) 

const jobDisplayFunction = function(job){ 
    var array = [] 
    job.forEach(function(result){ 
     console.log(result) 
     if(result.active){ 
      array.push(
       <div className='sample'> 
        <Image src={profilePicture} height={50} width={50} alt='Employer Logo' rounded/> 
        <h2>{result.title}</h2> 
        <p>{result.location}</p> 
        <p>{result.sector}</p> 
        <p>{result.county + ', ' + result.country}</p> 
        <p>{'Paid: ' + result.compensation}</p> 
        <p>{'Total Applicants: ' + result.applicants}</p> 
        <p>{'Shortlisted: ' + result.shortlist}</p> 
        <p>{'Interviews: ' + result.interview}</p> 
        <p>{'Offered Job: ' + result.offer}</p> 
        <p>{'Accepted Job: ' + result.accepted}</p> 
        <p>{'Rejected Job: ' + result.rejected}</p> 
        <Button onClick={() => this.getJobIndex(result.active, result.id)}>duplicate</Button> 
       </div> 
      ); 
     } 
    }.bind(this)) 
    // return(array) 
    return array 
    } 
} 

Answer 1

이 내 충고 단지 누구도 비슷한 일을하려고 계획이다 넣다 있도록 :

1 단계 : 마운트 않았다 구성 요소에서 높은 수준의 상태를 설정하려면 API 호출을 사용

var counter = 0 
apicall.result.forEach(function(element){ 
    var name = 'jobNumber'+counter 
    var holder = {name : element} 
    for(key in holder){ 
     this.state[key] = holder[key] 
    } 
}) 
this.state.numberjobs = counter 
this.setState(this.state) 

2 단계 :

<div>{this.createDoms()}</div> 

곳을 다음과 같이 렌더링 방식의 필드를 채울 상태를 사용 createDoms()는 다음과 같이 componentdidmount()에 설정된 상태를 순환합니다.

createDoms(){ 
    var numberCurrentJobs = this.state.numberJobs 
    var returnArray = [] 
    for(x in numberCurrentJobs){ 
     var array = this.state['jobNumber'+x] 
     returnArray.push({array.title})//add all other DOM members 
    } 
    return returnArray 
} 

Answer 2

또는 거부 된 약속.

나는 componentDidMount (에 this.renderJobs()를 호출 제안)과 같은 것을 볼 수 있었다)에서 (렌더링 당신의 국가에 데이터를 설정하고 상태를 렌더링 :

componentDidMount() { 
    this.renderJobs().then((array) => { 
    this.setState({ jobs: array }); 
    }); 
} 

render() { 
    if (!this.state.jobs) { 
    return null; 
    } 

    return (<div>{this.state.jobs}</div>); 
} 

편집 :

를 좋아

componentDidMount() { 
    this.apiClient...().then((returnVal) => { 
    this.setState({ jobs: returnVal }); 
    }); 
} 

render() { 
    if (!this.state.jobs) { 
    return null; 
    } 

    return <div>{this.jobDisplayFunction(this.state.jobs)}</div>; 
} 

jobDisplayFunction = (jobs) => { 
    ...same as before 
};