this.state 在 fetch() 之后未定义

Question

我有一个问题，在我使用 fetch 之后，我的 this.state 是未定义的，我不明白为什么......

googlePOI(center) {
        this.setState({markerPOI: []});
        var i = 0;
        let call = '';
        call = call.concat(URL_POI, center.lat.toString(), ',', center.lng.toString(), ARG_POI, this.state.filters[i], KEY);
        console.log(this.state) // DEFINE !
        fetch(call)
            .then((answer) => answer.json())
            .then(function(answer) {
                console.log(this.state) // UNDEFINE !
                answer.results.map((item, index) => {
                    let geo = item.geometry.location;
                    let marker = <MapView.Marker title={item.name} coordinate={{latitude: geo.lat, longitude: geo.lng}} />
                })
            }).catch(function(error) {
                console.log("ERROR: fetch googlePOI -> "+error);
            })

    }

Answer 1

这是因为当调用 promise 的回调时，函数的内部上下文发生了变化。换句话说，this 不再是以前的样子了！你可以做一个console.log(this)，你会发现自己。

最简单的解决方案是在顶部保留this 的引用：

var me = this;

fetch(url).then(function() {
  console.log(me.state)
});

您也可以将 this 与回调函数绑定：

fetch(url).then(function() {
  console.log(this.state)
}.bind(this));

或者最推荐的 ES2015 Arrows 使用方式：

fetch(url).then(() => {
  console.log(this.state)
});

出于教育目的，我建议写一篇类似what is this的文章