CODEWITHSUNDEEP
react-nativecontinuous-integrationeslintlintnpm-scripts
oflcad
oflcad

Reputation: 515

react native lint critical failed?

After running npm run lint:critical, it came back with one error, that is this: 

61:26  error    Unexpected 'this'                                 no-invalid-this

the function ask for the user permission for location detection: 

_askForPermission = async () => {
    const { dispatch } = this.props;
    try {
      const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        dispatch($isLocationActive()).catch((error) => dispatch(Activity.$toast('failure', error.message)));
      }
    } catch (err) {
      console.warn(err);
    }
  };

the line const { dispatch } = this.props; is causing the error, and I need to fix because it is causing a fail at the pipeline CI/CD

Upvotes: 0

Views: 79

Answers (1)

Josh Kelly
Josh Kelly

Reputation: 978

I wouldn't be passing dispatch to components. I think it would be better to create an action that does what you need it to and pass it into the component through mapDispatchToProps. Your component may look something like this:

import { toastError } from './actions'

class Foo extends Component {
  render() {
    _askForPermission = async () => {
      const { myNewPropFromAction } = this.props;
      try {
        const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          myNewPropFromAction()
        }
      } catch (err) {
        console.warn(err);
      }
    };

    return (
      <div>Hello World</div>
    )
  }
}

const mapDispatchToProps = dispatch => ({
  myNewPropFromAction: toastError 
});

export default ({}, mapDispatchToProps)(Foo);

Upvotes: 1

Related Questions