api - api调用成功后更新状态

Question

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

我有两个 API:一个来自 NASA，带有卫星位置，另一个用于 GIS 软件的 map 层。我尝试通过获取空间中卫星位置的当前坐标来更新 map 坐标。这将每 1 秒触发一次，并根据卫星坐标更新 map 的位置。但是，状态不会更新。

代码如下:

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;

我通过重新启动 fetch 函数每秒成功地检索卫星的更新坐标，但是 map 的状态没有改变。

我可能错过了什么？!

Answer 1

因为在第二个 .then 中你返回了另一个箭头函数而不是执行 setState。该函数未被调用，这就是状态未更新的原因。

这样写去掉另一个箭头函数:

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

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

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

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

What do multiple arrow functions mean in javascript?