api调用成功后更新状态

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;

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

我可能错过了什么？！

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?