funciones - tipos de clases en javascript

Se espera que ''this'' sea usado por el método de clase

Question

En mi clase, eslint se queja "Se esperaba que ''este'' se usara con el método de clase ''getUrlParams''

Aquí está mi clase:

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>
    );
  }
}

¿Cuál es el mejor enfoque para resolver esto o refactorizar este componente?

Answer 1

Esta es una regla ESlint, vea class-methods-use-this .

Podría extraer el método getUrlParams y ponerlo en un ayudante , o para hacerlo static .

Lo que también podría hacer es mover la this.props.location.search dentro del método, por lo tanto, llame al método this.getUrlParams() sin parámetro, ya que parece que lo está usando solo una vez.

Por lo tanto, esto podría verse como:

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

Una última opción sería deshabilitar esta regla de ESlint.

Answer 2

Un posible hack a esta regla podría ser.

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

Answer 3

debe vincular la función a this ya que el error de ESLint dice "Expected ''this'' to be used by class method ''getUrlParams''

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

Answer 4

Otro caso de uso podría ser.

Digamos que tienes un método llamado handlePasswordKeyUp . El cuerpo de la función se puede ver así.

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

El código anterior activará ese error. Así que al menos usa esta función dentro del cuerpo.

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

Answer 5

getUrlParams = queryString => { ... }