javascript - 命名函数导致 setState 错误

Question

这是我的应用程序类

  constructor(props) {
    super(props);

    this.state = { lat: null, errorMessage: "" };

    window.navigator.geolocation.getCurrentPosition((position) => {
      this.setState({ lat: position.coords.latitude });
    });
  }

当我将箭头函数更改为使用单词函数时，它会抛出一个错误，指出无法读取未定义的 setState 的属性

  constructor(props) {
    super(props);

    this.state = { lat: null, errorMessage: "" };

    window.navigator.geolocation.getCurrentPosition(function (position) {
      this.setState({ lat: position.coords.latitude });
    });
  }

语法有问题吗？

Answer 1

上下文不同，这不是 React 的一部分，它更多地与 javascript 有关。

传统函数将使用调用者的this(通常是事件触发器)

但是，箭头函数将使用当前函数上下文中的 this ，在本例中是 react 组件，这就是它在箭头函数上工作的原因。