React JS Google Maps Distance Matrix Error: Uncaught TypeError:locations.join is not a function at formatLocations (index.js:45)

Question

我不确定这是否是一个错误，所以我要先征求意见，因为我对 ReactJS 很陌生

我正在尝试实施 Google 距离矩阵来获取距离。

（如果有任何预先构建的 reactjs 替代解决方案，请告诉我）

我的代码：

import React, {Component} from 'react';
import GoogleMap from 'google-distance-matrix';
//...
class View extends Component {
  state = {
    //...
    address:'',
    dest: '',
    distanceText:'',
    openModal: false,
    foundDistance: false,
    distanceText: "",
    address: "New York NY",
    dest: "Montreal"

  };
  constructor (props){
    super(props)
    this.searchUpdated = this.searchUpdated.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);

  }

  handleFormSubmit = (event) => {
    const component = this
    // const { address, dest } = this.state
    let address = "Toronto, ON, CA"
    let dest = "Vancouver, ON, CA"
    let origins = ['San Francisco CA', '40.7421,-73.9914'];
    let destinations = ['New York NY', 'Montreal', '41.8337329,-87.7321554', 
    'Honolulu'];

    event.preventDefault()
    // console.log(event)
    GoogleMap.matrix(address, dest, function (err, distances) {
        distance.key('AIzaSyCFKLGuYz6ffYby7U-ODjFtV5TO4nDyevE');
        distance.units('imperial');
        console.log("address");
        console.log(dest);
        console.log(err);
        console.log(distances);
        if (err) {
            return console.log(err);
        }
        if(!distances) {
            return console.log('no distances');
        }

        if (distances.status == 'OK') {
            if(distances.rows[0].elements[0])  {
                var distance = distances.rows[0].elements[0].duration['text'];
                console.log(distance);
                component.setState({
                    foundDistance: true,
                    distanceText: distance
                });
            }
        }
    }).bind(this);
}

  componentWillMount() {
    //...
  }
  componentDidMount () {
      // ...
  }
  render() {
//...
    return (
      <div>
        <button onClick={this.handleFormSubmit}>Hello </button>

      </div>
    )
  }
}

export default View;

我实际上只是想 console.log() 两个位置之间的距离，但我无法这样做......现在，它给了我这个错误：

未捕获的类型错误：locations.join 不是函数 在 formatLocations (index.js:45) 错误给了我什么：

Answer 1

当您调用GoogleMap.matrix 时，错误来自您的handleFormSubmit 函数，它应该如下所示：

  handleFormSubmit = (event) => {
    const component = this
    // const { address, dest } = this.state
    let address = ["Toronto, ON, CA"];
    let dest = ["Vancouver, ON, CA"];

    event.preventDefault()
    // console.log(event)
    GoogleMap.matrix(address, dest, function (err, distances) {

注意多伦多和温哥华的括号；包期望这两个参数是数组，而不是字符串