OpenSlayers setState при выборе события - PullRequest
Новая
       4

OpenSlayers setState при выборе события

1 голос
/ 05 марта 2020

Я пытаюсь вызвать React setState при нажатии на элемент. Я пытаюсь отредактировать selectedFeature и показать его свойства на экране. Но я получаю сообщение об ошибке «TypeError: Cannot read property 'setState' of undefined» каждый раз, когда я пытаюсь выполнить метод click. 

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

Ответы [ 2 ]

1 голос
/ 05 марта 2020

Это не определено

Использовать жирную стрелку вместо ключевого слова функции. Вы добавляете новую область при добавлении function. 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);
    };

    ...
}
0 голосов
/ 05 марта 2020

Проблема заключается в неправильном представлении 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);
    };

    ...
}
...