wake-up-neo.com

Es wurde erwartet, dass 'this' von der Klassenmethode verwendet wird

In meiner Klasse beschwert sich "eslint" "Erwartet, dass dieses von der Klassenmethode" getUrlParams "verwendet wird

Hier ist meine Klasse:

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

Was ist der beste Ansatz, um diese Komponente zu lösen oder umzuformen?

javascriptreactjsecmascript-6eslint
24
Hinesh Patel

sie sollten die Funktion an this binden, da der ESLint-Fehler "Expected 'this' to be used by class method 'getUrlParams' angibt.

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

da Sie getUrlParams während des Renderns nicht verwenden (wie onClick()), ist die obige Technik gut, die wir "Verwendung der Pfeilfunktion in der Klasseneigenschaft" nennen können.

es gibt auch andere Bindungsmöglichkeiten:

  • bindung im Konstruktor this.getUrlParams=this.getUrlParams.bind(this)
  • pfeilfunktion beim Rendern, z. B. onClick={()=>this.getUrlParams()}, davon ausgegangen, dass die Funktion keine Parameter hat.
  • und React.createClass was mit ES6 nicht sinnvoll ist :)
13
Amir-Mousavi

Dies ist eine ESlint-Regel, siehe class-Methods-use-this .

Sie können die Methode getUrlParams extrahieren und in einen helper einfügen oder static machen.

Sie können auch den this.props.location.search innerhalb der Methode verschieben und daher die this.getUrlParams()-Methode ohne Parameter aufrufen, da Sie sie anscheinend nur einmal verwenden.

Daher könnte dies so aussehen:

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

Eine letzte Option wäre das Deaktivieren dieser ESlint-Regel.

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

Meine Lösung besteht darin, diese Funktion außerhalb der Klasse zu verwenden und diese Funktion an die Klasse zu binden.

function 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;
}
class PostSearch extends React.Component {
  constructor(props) {
    super(props);
    this.getSearchResults();
    this.getUrlParams = getUrlParams.bind(this); // add this
  }

  getSearchResults() {
   const { terms, category } = this.getUrlParams(this.props.location.search);
   this.props.dispatch(Actions.fetchPostsSearchResults(terms, category));
  }
  render() {
   return (  "bla bla"  );
  }
}
0
Arjun G Perambra

Ein anderer Anwendungsfall könnte sein.  

Angenommen, Sie haben eine Methode namenshandlePasswordKeyUp. Der Funktionskörper kann so gesehen werden.

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

Der obige Code löst diesen Fehler aus. Verwenden Sie also mindestens this innerhalb der Körperfunktion

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