Question

我有它工作它会将响应记录到控制台但是我无法设置到我将把所有代码放在下面的状态的距离。

getDist(dest){
var self = this;
var origin = this.state.location,
    destination = this.state.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
      }, 
      this.callback
    );
}

callback(response, status) {
    const self = this;
    if(status === "OK") {
        console.log(response);
        var dest = response.destinationAddresses[0];
        var dist = response.rows[0].elements[0].distance.text;
        return response;
    } else {
        alert("Error: " + status);
    }
  }

我试图在回调函数中设置状态，它说setState({})不是函数。香港专业教育学院试图通过这样做this.setState({ distFromLoc: self.callback })来设置状态，但这只是将回调函数代码设置为不是我想要的状态我已经达到了我的知识结束而我与之合作的其他Web开发人员没有用我们的逻辑来理解。

我只需要能够将状态设置为2秒，因为我循环浏览了大约36个作业的列表，并且在每次搜索之后它将检查该作业是否足够接近搜索人员。

先谢谢-Andy

编辑1：我已经编辑了我的代码它不再出错但它仍然不会让我返回数据你能不能告诉我我做错了什么？

要添加调用它的类，因为它说我不能在函数上使用.then将函数转换为promise函数。

updateSearchResults(data) {
this.setState({
  searching: true,
});
var self = this;
var output = [];
console.log('Here we will search the db using user data for suitable jobs');
console.log('do some math to work out how many pagination we need for the amount of returned jobs and update the state accordingly');
data.forEach(item => {
  console.log('before');
  this.getDist(item.postcode).then(function (res){
    console.log('after');
    console.log(this.state.distFromLoc);
    if (this.state.location === '') {
      if (item.option === 'Part Time' && this.state.partTime && !this.state.weekend){
        if (item.title.toLowerCase().match(this.state.keywords.toLowerCase()) !== null ) {
          console.log('1');
          output.push(item)
        } else if (this.state.keywords === ''){
          console.log('2');
          output.push(item);
        }
      } else if (item.option === 'Weekends' && this.state.weekend && !this.state.partTime){
        if (item.title.toLowerCase().match(this.state.keywords.toLowerCase()) !== null ) {
          console.log('3');
          output.push(item)
        } else if (this.state.keywords === ''){
          console.log('4');
          output.push(item);
        }
      } else if (item.option === 'both' && this.state.weekend && this.state.partTime){
        if (item.title.toLowerCase().match(this.state.keywords.toLowerCase()) !== null ) {
          console.log('5');
          output.push(item)
        } else if (this.state.keywords === ''){
          console.log('6');
          output.push(item);
        }
      } else if (!this.state.weekend && !this.state.partTime) {
        if (item.title.toLowerCase().match(this.state.keywords.toLowerCase()) !== null ) {
          console.log('7');
          output.push(item)
        } else if (this.state.keywords === ''){
          console.log('8');
          output.push(item);
        }
      }
    } else if (this.state.distFromLoc <= this.state.distance) {
      console.log(this.state.distFromLoc);
      console.log(this.state.distance);
      if (item.option === 'Part Time' && this.state.partTime && !this.state.weekend){
        if (item.title.toLowerCase().match(this.state.keywords.toLowerCase()) !== null ) {
          console.log('9');
          output.push(item)
        } else if (this.state.keywords === ''){
          console.log('10');
          output.push(item);
        }
      } else if (item.option === 'Weekends' && this.state.weekend && !this.state.partTime){
        if (item.title.toLowerCase().match(this.state.keywords.toLowerCase()) !== null ) {
          console.log('11');
          output.push(item)
        } else if (this.state.keywords === ''){
          console.log('12');
          output.push(item);
        }
      } else if (item.option === 'both' && this.state.weekend && this.state.partTime){
        if (item.title.toLowerCase().match(this.state.keywords.toLowerCase()) !== null ) {
          console.log('13');
          output.push(item)
        } else if (this.state.keywords === ''){
          console.log('14');
          output.push(item);
        }
      } else if (!this.state.weekend && !this.state.partTime) {
        if (item.title.toLowerCase().match(this.state.keywords.toLowerCase()) !== null ) {
          console.log('15');
          output.push(item)
        } else if (this.state.keywords === ''){
          console.log('16');
          output.push(item);
        }
      }
    }
  })
  .catch(function (err){
    console.log(err);
  });
});
window.setTimeout(function() {
self.setState({
  dataToShow: output,
  searching: false,
  current: 1,
});
const dataLength = self.state.dataToShow.length
self.setState({
  amountOfJobs: dataLength
})}, 10000)
}

getDist(dest){
var self = this;
const wrappedCallback = (...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) {
    const self = this;
    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
          })
        }
    } else {
        alert("Error: " + status);
    }
  }

我知道我做错了什么我只是无法弄清楚究竟是什么。

当前错误我得到的是这个TypeError：无法读取属性'然后'未定义为什么我不能对函数提出承诺。

Answer 1

这是一个绑定问题，也是避免在javascript中使用类的主要原因之一。这就是您的问题所在：

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

当您将回调提供为this.callback时，您正在传递函数。但是，当调用该函数时，它不再需要知道this实际上是什么的上下文，因为调用代码现在位于Google的API中。这个问题有3个解决方案。

1）绑定函数，使其知道this是什么

 //boundCallback will now always have the correct value for "this"
const boundCallback = this.callback.bind( this );

2）用胖箭头功能（仅限ES6）包裹它

//fat arrow always takes the value of "this" from surrounding scope
const wrappedCallback = (...args) => this.callback(...args);

3）使用React.createClass()作为您的组件这是我首选的解决方案 - 如果您使用React.createClass()创建组件而不是使用class Comp extends React.Component，则所有功能都会自动绑定给您，因此您永远不需要弄乱 - this.callback总是正确的。

Answer 2

可能有另一种解决方案，但它使用全局变量：

window.callback = function( ) {};

window.callback = (code, name) => {
    me.setState({stateVariable: code});     
};

您可以相应地更改此代码并在代码的任何位置使用回调（因为它是使用保留上下文的箭头函数全局声明的，它是一个闭包）

谷歌距离矩阵Api React Js Cant设置距离状态

2 个答案: