

SyntaxError: Unexpected tokenとエラーが出ます。

[code]

    import React, { Component } from 'react';
    import axios from 'axios';
    
    import SearchForm from './SearchForm';
    import GeocodeResult from './GeocodeResult';
    import Map from './Map';
    
    const GEOCODE_ENDPOINT = 'https://maps.googleapis.com/maps/api/geocode/json';
    
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
        };
      }
    
      setErrorMessage(message) {
        this.setState({
          address: message,
          lat: 0,
          lng: 0,
        });
      }
    
      handlePlaceSubmit(place) {
        axios
        .get(GEOCODE_ENDPOINT, { params: { address: place } })
        .then((results) => {
          console.log(results);
          const data = results.data;
          const result = data.results[0];
          switch (data.status) {
            case 'OK': {
              const location = results.geometry.location;
              this.setState({
                address: result.formatted_address,
                lat: location.lat,
                lng: location.lng,
              });
              break;
            }
            case 'ZERO_RESULTS': {
              this.setErrorMessage('結果が見つかりませんでした');
              break;
            }
            default: {
              this.setErrorMessage('エラーが発生しました');
              }
            }
          })
            .catch((error) => {
                this.setErrorMessage('通信に失敗しました');
              });
          }
    
          const location = results.geometry.location;
          this.setState({
            address: result.formatted_address,
            lat: location.lat,
            lng: location.lng,
          });
        };
        }
    
      render() {
        return (
          <div>
            <h1>緯度経度検索</h1>
            <SearchForm onSubmit={place => this.handlePlaceSubmit(place)} />
            <GeocodeResult
              address={this.state.address}
              lat={this.state.lat}
              lng={this.state.lng}
            />
            <Map lat={this.state.lat} lng={this.state.lng} />
          </div>
        );
      }
    }
    
    export default App;
    
[/code]

とコードを書いて、実行すると、

[code]

    ERROR in ./src/components/App.jsx
    Module build failed: SyntaxError: Unexpected token (56:12)
    
      54 |       }
      55 |
    > 56 |       const location = results.geometry.location;
         |             ^
      57 |       this.setState({
      58 |         address: result.formatted_address,
      59 |         lat: location.lat,
    
[/code]

とエラーが出ました。const location =
results.geometry.location;の行が何かおかしいのかな？と思いましたが原因がわからず。。。そのほかのカッコの数かもしれません。。。  
エラーの箇所を指摘していただければと思います。


CC BY-SA 3.0
2018-04-03T13:45:51.587
42906
2021-04-04T00:54:30.603
2021-04-04T00:54:30.603
32986
27691
question
reactjs axios
SyntaxError: Unexpected token


インデントを合わせてみたところ、`App`クラス定義の中で、`const location =
results.geometry.location;`の行から、`render`メソッド定義の前の行までの記述が、メソッド定義の外に出てしまっているようです。

[code]

    class App extends Component {
      constructor(props) {
        // 略
      }
    
      setErrorMessage(message) {
        // 略
      }
    
      handlePlaceSubmit(place) {
        axios
        .get(GEOCODE_ENDPOINT, { params: { address: place } })
        .then((results) => {
          // 略
        })
        .catch(() => {
          this.setErrorMessage('通信に失敗しました');
        });
      }
    
      const location = results.geometry.location; // ここから
      this.setState({
        address: result.formatted_address,
        lat: location.lat,
        lng: location.lng,
      });
    };
    } // ここまで
    
      render() {
        // 略
      }
    }
    
[/code]


CC BY-SA 3.0
2018-04-04T02:38:23.347
42916
2018-04-04T02:38:23.347
27930
42906
answer