У меня есть компонент, который представляет базовую карту из ESRI ArcGIS Api. Я пытаюсь обновить координаты долготы и широты карты, извлекая информацию из другого API и обновляя координаты, используя fetch и setState. Это мой код компонента:

import React from 'react';
import { Map  } from 'react-arcgis';

class Basemap extends React.Component {

    constructor() {
        super();
        this.state = {};
    }

    componentDidMount() {
        const url = 'http://api.open-notify.org/iss-now.json';
        fetch(url)
            .then((d) => {
                this.setState({
                    center: [{d.iss_position.latitude} + ', ' + {d.iss_position.longitude}]
                });
            });
    }

    render() {
        return (
            <Map style={{ width: '100vw', height: '100vh' }} 
                    mapProperties={{ basemap: 'satellite' }} 
                    viewProperties={{ this.state.center }} />
        );
    }
}

export default Basemap;

Тем не менее, я получаю эту ошибку:

./src/components/basemap.js
Syntax error: components/basemap.js: Unexpected token, expected , (16:16)

  14 |          .then((d) => {
  15 |              this.setState({
> 16 |                  center: [{d.iss_position.latitude} + ', ' + {d.iss_position.longitude}]
     |                             ^
  17 |              });
  18 |          });
  19 |  }

Я что-то упускаю в функции выборки?

1
birdybird03 31 Авг 2017 в 13:48

3 ответа

Лучший ответ

Ответ, который вы получаете от fetch, не является ответом JSON, который вы ожидаете.

fetch('http://api.open-notify.org/iss-now.json')
  .then(response => response.json())
  .then(response => {
    this.setState({
      center: [...]
    })
})

Также вы ошибочно объединяете результат:

Если центр лат, lng:

this.setState({
  center: [d.iss_position.latitude, d.iss_position.longitude]
})

Или

this.setState({
  center: `${d.iss_position.latitude}, ${d.iss_position.longitude}`
})

Или

this.setState({
  center: {
    latitude: d.iss_position.latitude,
    longitude: d.iss_position.longitude
  }
})

В зависимости от того, что ответ должен быть.

2
mersocarlin 31 Авг 2017 в 11:08

Неожиданный токен, ожидаемый,

Существует проблема с Shorthand property names,

Предполагая, что вы используете latitude и longitude, тогда это должно быть

 center: [
          {latitude : d.iss_position.latitude} + ', ' + 
          {longitude: d.iss_position.longitude}
        ]
0
RIYAJ KHAN 31 Авг 2017 в 11:06

Надеюсь это поможет

componentDidMount() {
    const url = 'http://api.open-notify.org/iss-now.json';
    fetch(url)
        .then((d) => {
            this.setState({
                center: [{latitude : d.iss_position.latitude} + ', ' + {longitude: d.iss_position.longitude}]
            });
        });
}
0
mirvatJ 31 Авг 2017 в 11:00