Question

我有一个代表ESRI ArcGIS Api底图的组件。我尝试通过从另一个API获取信息并使用fetch和setState更新coords来更新地图的长距离和纬度坐标。这是我的组件代码：

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 |  }

我在fetch函数中遗漏了什么吗？

Answer 1

您从fetch获得的回复不是您期望的JSON回复。

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

此外，您错误地连接了结果：

如果中心是lat，那么：

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
  }
})

取决于响应应该是什么。

Answer 2

意外的令牌，预期，

Shorthand property names存在问题。

假设您使用的是latitude和longitude，那么它应该是

 center: [
          {latitude : d.iss_position.latitude} + ', ' + 
          {longitude: d.iss_position.longitude}
        ]

Answer 3

希望这会有所帮助

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}]
            });
        });
}

从API获取并更新React comp的状态

3 个答案: