PROSAGA码农传奇-MapInfo-React：如何在AddListener（）中使用setState？

0# v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    首先，我不建议您使用匿名函数设置为事件侦听器，因为在这种情况下您将无法
     <code>
      removeEventListener
    </code>
     或类似的东西（可能，因为它不清楚，是什么
     <code>
      map
    </code>
     这里）。
  </p>
  <P>
    第二件事是你不应该约束你的
     <code>
      dataHandler
    </code>
    ，因为它已经是一个箭头功能，所以没有问题
     <code>
      this
    </code>
     在 - 的里面
     <code>
      dataHandler
    </code>
     上下文。你应该绑定的东西是你的手动事件监听器。所以结果代码应如下所示：
  </p>
   <pre>
    <code>
      constructor(props){
    super(props)
    this.state = {
        selActive: 4,
        loaded: false,
        mapInfo: ''
    }
    this.onScriptLoad = this.onScriptLoad.bind(this)
    this.dataHandler = this.dataHandler.bind(this)
    this.handleMouseOver = this.handleMouseOver.bind(this)
}

dataHandler = (getJson) => {
    fetch(getJson)
        .then(response => response.json())
        .then(featureCollection => 
            dataLayer = map.data.addGeoJson(featureCollection)
        );
    map.data.addListener('mouseover', this.handleMouseOver);
}

handleMouseOver(event) {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {fillColor: 'blue'});
    this.setState({mapInfo: event.feature.countryNL})
}

</code>
  </pre>
  <P>
    或者，使用箭头功能，自动绑定：
  </p>
   <pre>
    <code>
      constructor(props){
    super(props)
    this.state = {
        selActive: 4,
        loaded: false,
        mapInfo: ''
    }
    this.onScriptLoad = this.onScriptLoad.bind(this)
    this.dataHandler = this.dataHandler.bind(this)
}

dataHandler = (getJson) => {
    fetch(getJson)
        .then(response => response.json())
        .then(featureCollection => 
            dataLayer = map.data.addGeoJson(featureCollection)
        );
    map.data.addListener('mouseover', this.handleMouseOver);
}

handleMouseOver = (event) => {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {fillColor: 'blue'});
    this.setState({mapInfo: event.feature.countryNL})
}

</code>
  </pre>
  <P>
    希望对你有帮助！ :)
  </p>
</DIV>

1# 陆离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    在JavaScript中
     <code>
      this
    </code>
     总是指我们正在执行的函数的“所有者”，或者更确切地说，指向函数是其方法的对象。
请改用箭头功能。
箭头功能没有自己的功能
     <code>
      this/super/arguments
    </code>
     捆绑。它从其父词法范围继承它们。
  </p>
   <pre>
    <code>
      map.data.addListener('mouseover', (event) => {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {fillColor: 'blue'});
    // THIS IS WHERE I ADD MY SETSTATE. 
    // HOWEVER, THIS RETURNS AN ERROR ON HOVER
    this.setState({mapInfo: event.feature.countryNL})
});

</code>
  </pre>
  <P>
    参考：
  </p>
  <UL>
    <LI>
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this" rel="nofollow noreferrer">
        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this
      </A>
    </LI>
    <LI>
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" rel="nofollow noreferrer">
        https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
      </A>
    </LI>
  </UL>
</DIV>

2# Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
     <code>
      this
    </code>
     正常函数内部或者指向全局对象或当前实例（在通过
     <code>
      new
    </code>
    ）。然而
     <code>
      this
    </code>
     从外部范围捕获箭头函数内部。所以
     <code>
      this
    </code>
     在里面
     <code>
      addListener
    </code>
     回调是指全局对象（
     <code>
      window
    </code>
    ）。要解决此问题，您有以下选择：
  </p>
  <UL>
    <LI>
      <P>
        使用箭头功能：
      </p>
       <pre>
        <code>
          map.data.addListener('mouseover', (event) => {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {fillColor: 'blue'});
    // THIS IS WHERE I ADD MY SETSTATE. 
    // HOWEVER, THIS RETURNS AN ERROR ON HOVER
   this.setState({mapInfo: event.feature.countryNL})
});

</code>
      </pre>
    </LI>
    <LI>
      <P>
        运用
        <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind" rel="nofollow noreferrer">
          绑定功能
        </A>
        ：
      </p>
       <pre>
        <code>
          map.data.addListener('mouseover', function (event) {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {fillColor: 'blue'});
    // THIS IS WHERE I ADD MY SETSTATE. 
    // HOWEVER, THIS RETURNS AN ERROR ON HOVER
   this.setState({mapInfo: event.feature.countryNL})
}.bind(this));

</code>
      </pre>
    </LI>
  </UL>
</DIV>