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