Openlayers setState on Select 事件

Question

我试图在单击某个功能时触发 React setState。 我尝试编辑 selectedFeature 并在屏幕上显示它的属性。 但是每次尝试执行 click 方法时，我都会收到“TypeError：无法读取未定义的属性‘setState’”错误消息。

componentDidMount() {
    ...

    function featureSelected(event) {
      console.log(event.selected[0].getProperties());
      this.setState({ selectedFeature: event.selected[0].getProperties() });
    }

    var changeInteraction = function() {
      var select = new Select({});
      select.on("select", event => featureSelected(event));
      map.addInteraction(select);
    };

    ...
}

这是引发错误的行：

 this.setState({ selectedFeature: event.selected[0].getProperties() });

这是我的国家财产：

class MyMap extends Component {
  state = {
    selectedFeature: null
  };
...

Answer 1

这是未定义的

使用粗箭头函数代替 function 关键字。 添加function时添加新的作用域。 this成为函数的this而不是类的this 。

一个粗箭头函数向下传递this的范围，并允许您调用 setState 之类的类方法。

componentDidMount() {
    ...

    const featureSelected = (event) => {
      console.log(event.selected[0].getProperties());
      this.setState({ selectedFeature: event.selected[0].getProperties() });
    }

    var changeInteraction = () => {
      var select = new Select({});
      select.on("select", event => featureSelected(event));
      map.addInteraction(select);
    };

    ...
}

Answer 2

问题是对this的误解

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

基本上这指的是最近的函数父级。 在您的情况下，这是指featureSelected 。 尝试通过将其存储到变量中来创建对所需的this的引用。

 componentDidMount() { ... const myClass=this; //Reference to the above class function featureSelected(event) { console.log(event.selected[0].getProperties()); //Use that reference instead of this myClass.setState({ selectedFeature: event.selected[0].getProperties() }); } var changeInteraction = function() { var select = new Select({}); select.on("select", event => featureSelected(event)); map.addInteraction(select); }; ... }