web-dev-qa-db-fra.com

"This" attendu par la méthode de classe

Dans ma classe, eslint se plaint que "cela devrait être utilisé par la méthode de classe" getUrlParams "

Voici ma classe:

class PostSearch extends React.Component {
  constructor(props) {
    super(props);
    this.getSearchResults();
  }

  getUrlParams(queryString) {
    const hashes = queryString.slice(queryString.indexOf('?') + 1).split('&');
    const params = {};

    hashes.forEach((hash) => {
      const [key, val] = hash.split('=');
      params[key] = decodeURIComponent(val);
    });

    return params;
  }

  getSearchResults() {
    const { terms, category } = this.getUrlParams(this.props.location.search);
    this.props.dispatch(Actions.fetchPostsSearchResults(terms, category));
  }

  render() {
    return (
      <div>
        <HorizontalLine />
        <div className="container">
          <Col md={9} xs={12}>
            <h1 className="aboutHeader">Test</h1>
          </Col>
          <Col md={3} xs={12}>
            <SideBar />
          </Col>
        </div>
      </div>
    );
  }
}

Quelle est la meilleure approche pour résoudre ce problème ou refactoriser ce composant?

javascriptreactjsecmascript-6eslint
24
Hinesh Patel

vous devez lier la fonction à this car l'erreur ESLint dit "Expected 'this' to be used by class method 'getUrlParams'

getUrlParams = (queryString) => { .... }

comme vous n'utilisez pas getUrlParams pendant le rendu (comme onClick()), la technique ci-dessus est bonne et nous pouvons l'appeler "utilisation de la fonction de flèche dans la propriété de classe".

il existe aussi d'autres moyens de relier:

  • liaison dans le constructeur this.getUrlParams=this.getUrlParams.bind(this)
  • la fonction de flèche dans le rendu, par exemple .onClick={()=>this.getUrlParams()} suppose que la fonction n'a pas de paramètres.
  • et React.createClass qui avec ES6 n'a pas de sens :)
13
Amir-Mousavi

Ceci est une règle ESlint, voir class-methods-use-this .

Vous pouvez extraire la méthode getUrlParams et la mettre dans un helper, ou la rendre static.

Vous pouvez également déplacer le this.props.location.search à l'intérieur de la méthode, en appelant par conséquent la méthode this.getUrlParams() sans paramètre, car il semble que vous ne l'utilisiez qu'une fois.

Par conséquent, cela pourrait ressembler à:

getUrlParams() {
    const queryString = this.props.location.search;
    ...
    return params;
  }

Une dernière option serait de désactiver cette règle ESlint.

16
Ioan
getUrlParams = queryString => { ... }
2
rfdc

Un autre cas d'utilisation pourrait être.  

Supposons que vous ayez une méthode appeléehandlePasswordKeyUp. Le corps de la fonction peut être vu comme ça.

handlePasswordKeyUp() {
  console.log('yes')
}

Le code ci-dessus déclenchera cette erreur. Donc, utilisez au moins this dans la fonction corporelle

handlePasswordKeyUp(){
   this.setState({someState: someValue})
}
0
Faris Rayhan