On s'attendait à ce que "this" soit utilisé par une méthode de classe.

Question

Dans ma classe, eslint se plaint "Expected 'this' to be used by class method '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 remanier ce composant ?

Answer 1

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

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

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

il y a aussi d'autres façons de lier :

• liaison dans le constructeur this.getUrlParams=this.getUrlParams.bind(this)
• 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 ce qui, avec ES6, n'a pas de sens :)

Answer 2

Il s'agit d'une règle ESlint, voir classe-méthodes-utiliser-ceci .

Vous pourriez extraire la méthode getUrlParams et le mettre dans un aide ou de le faire static .

Ce que vous pourriez aussi faire, c'est de déplacer le this.props.location.search à l'intérieur de la méthode, appelant ainsi le this.getUrlParams() sans paramètre, car il semble que vous ne l'utilisiez qu'une seule fois.

Cela pourrait donc ressembler à ceci :

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

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

Answer 3

getUrlParams = queryString => { ... }

Answer 4

Un autre cas d'utilisation pourrait être.

Disons que vous avez une méthode appelée handlePasswordKeyUp . Le corps de la fonction peut être vu comme suit.

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

Le code ci-dessus déclenchera cette erreur. Donc, utilisez au moins ce le fonctionnement de l'intérieur du corps

handlePasswordKeyUp(){
   this.setState({someState: someValue})
}

Answer 5

Une dérogation possible à cette règle pourrait être.

getMoviesByID(){
  //Add a reference to this in your function.
  this.funcName = 'getMoviesByID';
}