Question

我有一个问题，在我使用fetch后，我的这个状态是不确定的，我不明白为什么......

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

此外，您可以将其与回调函数绑定：

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

或者建议使用ES2015 Arrows的最佳方式：

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

出于教育目的，我会建议像what is this

这样的文章

this.state在fetch（）之后取消定义

1 个答案: