콜백을 통해 변수를 전달할 수 없으며 함수에 약속을 넣을 수 없습니다.

Question

데이터를 하드 코딩하여 사용자가 거리를 확인하기 위해 반복해야하는 코드가 있습니다.이 검사에는 googles 웹 API를 사용합니다. ID 코드를 통해 ID 변수를 전달하여 API에 액세스 할 수 있도록 액세스 할 수 있어야합니다.

내 코드는 다음과 같다 :

checkDist(data) { 
    this.setState({ 
    searching: true, 
    }); 
    var self = this; 
    data.forEach(item => { 
    console.log('check'); 
    self.getDist(item.postcode, item.id); 
    }); 
} 

updateSearchResults(dist) { 
    var output = []; 
    var self = this; 
    console.log('Here we will search the db using user data for suitable jobs'); 
    console.log("distFromLoc in Update: " + this.state.distFromLoc); 
    window.setTimeout(function() { 
    self.setState({ 
     dataToShow: output, 
     searching: false, 
     current: 1, 
    }); 
    const dataLength = self.state.dataToShow.length 
    self.setState({ 
     amountOfJobs: dataLength 
    })}, 10000) 
    } 
getDist(dest, id){ 
    var self = this; 
    const wrappedCallback = (id) => (...args) => this.callback(...args); 
    var origin = this.state.location, 
    destination = dest, 
    service = new window.google.maps.DistanceMatrixService(); 

    service.getDistanceMatrix(
    { 
     origins: [origin], 
     destinations: [destination], 
     travelMode: window.google.maps.TravelMode.DRIVING, 
     avoidHighways: false, 
     avoidTolls: false, 
     unitSystem: window.google.maps.UnitSystem.IMPERIAL 
    }, 
    wrappedCallback, 
); 
} 

callback(response, status, id) { 
    const self = this; 
    console.log("id in callback: " + id); 
    if(status === "OK") { 
    console.log(response); 
    var dest = response.destinationAddresses[0]; 
    if (response.rows[0].elements[0].status === "ZERO_RESULTS"){ 

     } else if (response.rows[0].elements[0].status === "OK"){ 
     var dist = response.rows[0].elements[0].distance.text; 
     this.setState({ 
      distFromLoc: dist 
     }, function() { 
      self.updateSearchResults(dist); 
     }) 
     } 
    } else { 
     alert("Error: " + status); 
    } 
    } 

ID는 const wrappedCallback = (id) => (...args) => this.callback(...args);-const wrappedCallback = (...args) => this.callback(...args);을 변경하여 최종 함수를 통해 전달되는하지만 더 이상 응답 또는 상태를 기록 콘솔하지 않는 한이 마지막 기능을 나누기 const가 첫 번째 방법이었을 때했던 일이지만 첫 번째 방법은 id가 무엇인지 알지 못합니다.

ID, 응답 및 상태가 모두 의미하는 바를 알 수있는 방법이 있습니까?

Answer 1

다른 변수에 여분의 변수를 전달하는 것은 매우 간단한 패턴으로 수행 할 수 있습니다.

는 이름

const hi = (name) => console.log(`hi ${name}`); 

에 안녕을 말한다 기능을 말해봐 그리고 당신은 이름을 통과 할 수 분명히 함수

setTimeout(hi, 1000); 

음을 받아들이에서는 setTimeout이 기능을 전달하려는 이제 id의 경우와 같지만,이 함수를 래핑하면 익명 함수를 전달하여 더 많은 인수를 전달할 수 있습니다.

setTimeout(() => hi('bill'), 1000); 

같은 방법으로 당신은 한 ID가이 선언시 범위에서와 같이 같은

(response, status) => callback(response, status, id) 

콜백에 전화를 포장 할 수 있습니다. 전체 기능의 변화는 다음과 같습니다

getDist(dest, id){ 
    var self = this; 
    var origin = this.state.location, 
    destination = dest, 
    service = new window.google.maps.DistanceMatrixService(); 

    service.getDistanceMatrix(
    { 
     origins: [origin], 
     destinations: [destination], 
     travelMode: window.google.maps.TravelMode.DRIVING, 
     avoidHighways: false, 
     avoidTolls: false, 
     unitSystem: window.google.maps.UnitSystem.IMPERIAL 
    }, 
    (response, status) => callback(response, status, id), 
); 
}