web-dev-qa-db-ja.com

クラスメソッドで使用される 'this'が期待されます

私のクラスでは、eslintが「クラスメソッド 'getUrlParams'によって使用される 'this'が予期されています」と文句を言っています。

これが私のクラスです：

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

これを解決するか、このコンポーネントをリファクタリングするための最良のアプローチは何ですか？

javascriptreactjsecmascript-6eslint
39
Hinesh Patel

eSLintエラーが"Expected 'this' to be used by class method 'getUrlParams'と言うので、関数をthisにバインドする必要があります

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

レンダリング中にgetUrlParamsを使用していないため（onClick()など）、上記の手法は適切であり、「クラスプロパティでの矢印関数の使用」と呼ぶことができます。

バインドには他の方法もあります。

  • コンストラクターのバインドthis.getUrlParams=this.getUrlParams.bind(this)
  • レンダリングの矢印関数。たとえば、onClick={()=>this.getUrlParams()}関数にはパラメーターがないと想定されています。
  • およびReact.createClass ES6では意味がありません:)
25
Amir-Mousavi

これはESlintルールです。 class-methods-use-this を参照してください。

メソッドgetUrlParamsを抽出してhelperに入れるか、staticにすることができます。

また、メソッド内でthis.props.location.searchを移動し、パラメータなしでthis.getUrlParams()メソッドを呼び出すこともできます。1回しか使用していないようです。

したがって、これは次のようになります。

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

最後のオプションは、このESlintルールを無効にすることです。

15
Ioan
getUrlParams = queryString => { ... }
1
rfdc

別のユースケースが考えられます。

handlePasswordKeyUpというメソッドがあるとします。関数の本体はこのように見ることができます。

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

上記のコードはそのエラーをトリガーします。したがって、少なくともbody関数内でthisを使用します

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

私の解決策は、クラス外でこの関数を使用し、この関数をクラスにバインドすることです。

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