Select 事件上的 Openlayers setState

Question

我试图在单击某个功能时触发 React setState。我尝试编辑 selectedFeature 并在屏幕上显示它的属性。但是我每次尝试执行点击方法时都会收到 "TypeError: Cannot read property 'setState' of undefined" 错误消息。

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 不再是 class 的函数。

粗箭头函数向下传递 this 的范围，并允许您调用 class 方法，如 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);
    };

    ...
}

Select 事件上的 Openlayers setState

Openlayers setState on Select event

javascript

openlayers

setstate

reactjs

这是未定义的