React / ES6类的范围

Question

我在理解ES6课程中this的范围时遇到了一些麻烦。在这里，我有组件：

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      credentials: {
        v: '3.exp',
        key: null,
      },
      coordinates: {
        lat: 51.5258541,
        lng: -0.08040660000006028,
      },
    };

    Meteor.call('googleMapsApiKey', (err, res) => {
      if (!err) {
        this.setState({ key: res });
      }
    });
  }

  onMapCreated(map) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(() => {
        this.setState({
          coordinates: {
            lat: this.lat,
            lng: this.lng,
          },
        });
      });
    } else {
      console.log('geolocation not supported');
    }

    map.setOptions({
      disableDefaultUI: true,
    });
  }

...

我在第33行收到错误，该错误在onMapCreated(map)函数中，特别是对this.setState的调用。

我怀疑我缺少某种绑定，或者它的范围指的是navigator.geolocation，因此不再引用该类。你们觉得怎么样？

Answer 1

这不是ES6的问题，它是绑定问题还是React。你应该在React的构造函数中绑定你的方法：

this.onMapCreated = this.onMapCreated.bind(this);

这样可以在您的方法中识别this。

好吧，也许是ES6的问题，请参阅React的docs：

  

使用React，每个方法都自动绑定到其组件实例（使用ES6类语法时除外）。