Question

花了两天的时间阅读和研究可能导致问题的原因，但我只是不明白。

我有两个API：一个来自NASA，位于卫星位置，另一个来自GIS软件的地图层。我尝试通过获取空间中卫星位置的当前坐标来更新地图坐标。这将每1秒触发一次，它将从卫星的坐标更新地图的位置。但是，国家不会更新。

以下是代码：

let url = 'http://api.open-notify.org/iss-now.json';

class Basemap extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            center: [31, 13]
        };
    }
    componentDidMount() {
        this.getCenter();
        this.interval = setInterval(this.getCenter, 2000);
    }
    getCenter() {
        fetch(url)
                .then(d => d.json())
                .then(d => (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 } />
        );
    }
}

export default Basemap;

我通过重新启动获取功能，每秒成功检索到卫星的更新坐标，但地图的状态不会发生变化。

我可能错过了什么？！

Answer 1

因为在第二个.then内，您正在返回另一个箭头函数而不是执行setState。该函数不会被调用，这就是状态没有得到更新的原因。

像这样写下删除另一个箭头功能：

fetch(url)
    .then(d => d.json())
    .then(d => {
        this.setState({
            center: [....]
        });
    });   
}

另一个问题是getCenter在将它作为回调方法传递给setInterval时会丢失上下文，因此在构造函数中绑定方法：

this.getCenter = this.getCenter.bind(this);

检查有关此语法的详细信息：() => () =>

What do multiple arrow functions mean in javascript?

api呼叫成功后更新状态

1 个答案: