Javascript 选择事件时的Openlayers设置状态

我试图在单击某个功能时触发React setState。我尝试编辑selectedFeature并在屏幕上显示其属性。但每次尝试执行click方法时，我都会收到一条“TypeError:cannotreadproperty'setState'ofundefined”错误消息

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

这是未定义的 使用fat arrow函数而不是function关键字。 在添加

函数时添加新的作用域<代码>此

成为

此

函数的，而不是类的

fat arrow函数向下传递

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

    ...
}

---

问题在于对

的误解


基本上，这是指最近的函数父函数。在您的情况下，这指的是所选的
功能
。
尝试将所需的
此
的引用存储到变量中，以创建该引用


componentDidMount（）{
...
const myClass=this；//对上述类的引用
已选择功能特性（事件）{
console.log（event.selected[0].getProperties（））；
//使用该引用而不是此引用
myClass.setState（{selectedFeature:event.selected[0].getProperties（）}）；
}
var changeInteraction=函数（）{
var select=new select（{}）；
选择.on（“选择”，事件=>featureSelected（事件））；
map.addInteraction（选择）；
};
...
}
非常感谢您的快速回答！这解决了我的问题。@user3566338没问题，希望
这个
的解释对你有帮助。理解JS非常重要