Select to view content in your preferred language

use of 'this' in the class component

374
1
Jump to solution
12-30-2022 09:36 AM
LefterisKoumis
Frequent Contributor

I am trying to use this script from the ArcGIS JS API to zoom in for a client-side feature layer. However, I get the error on line 7 due to the 'this' keyword. The prop is necessary since I am referring to the view from another module as suggested from another posting. The error is related to the  'this'  in a class component. I tried to bind the goTo   but didn't work. 

@RobertScheitlin__GISP , @Grant-S-Carroll or anyone else? Thank you.

 

 

this.props.mapView.goTo(response.extent).bind(this);

 

 

 

Error:

LefterisKoumis_0-1672420766863.png

Script:

 

 

this.props.mapView.whenLayerView(layer).then(function (layerView) {
        layerView.watch("updating", function (val) {
          // wait for the layer view to finish updating
          if (!val) {
            layerView.queryExtent().then(function (response) {
              // go to the extent of all the graphics in the layer view
              this.props.mapView.goTo(response.extent);
            });
          }
        });
      });

 

 

 

 

 

 

 

0 Kudos
1 Solution

Accepted Solutions
Grant-S-Carroll
Esri Contributor

You can use an arrow function in the callback, this will auto bind the outer scope to the inner scope, kind of like what the old lang.hitch used to do in Web AppBuilder development. 

this.props.mapView.whenLayerView(layer).then((layerView) => {
        layerView.watch("updating", (val) => {
          // wait for the layer view to finish updating
          if (!val) {
            layerView.queryExtent().then((response)=> {
              // go to the extent of all the graphics in the layer view
              this.props.mapView.goTo(response.extent);
            });
          }
        });
      });

 

 

 

 

I've not tested the above, but I think it should work, if not ping me back. The other thing to consider is pushing your callbacks out in to seperate functions as it make the code easier to test, if you're running unit tests etc.

View solution in original post

0 Kudos
1 Reply
Grant-S-Carroll
Esri Contributor

You can use an arrow function in the callback, this will auto bind the outer scope to the inner scope, kind of like what the old lang.hitch used to do in Web AppBuilder development. 

this.props.mapView.whenLayerView(layer).then((layerView) => {
        layerView.watch("updating", (val) => {
          // wait for the layer view to finish updating
          if (!val) {
            layerView.queryExtent().then((response)=> {
              // go to the extent of all the graphics in the layer view
              this.props.mapView.goTo(response.extent);
            });
          }
        });
      });

 

 

 

 

I've not tested the above, but I think it should work, if not ping me back. The other thing to consider is pushing your callbacks out in to seperate functions as it make the code easier to test, if you're running unit tests etc.

0 Kudos