1. ホーム
  2. javascript

[解決済み] クラスメソッドで 'this' が使用されることを期待する

2022-01-29 21:36:33

質問

私のクラスで、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>
    );
  }
}

この問題を解決したり、このコンポーネントをリファクタリングするための最良の方法は何でしょうか?

どのように解決するのですか?

にバインドする必要があります。 this ESLintのエラーにあるように "Expected 'this' to be used by class method 'getUrlParams'

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

を使用していないため getUrlParams レンダリング中に(例えば onClick() というわけで、上記のテクニックは、「クラスプロパティにおける矢印関数の使用」と呼ぶにふさわしいものです。

このほかにも、さまざまなバインディングの方法があります。

  • コンストラクタでの結合 this.getUrlParams=this.getUrlParams.bind(this)
  • レンダリング時の矢印関数 例 onClick={()=>this.getUrlParams()} 関数がパラメータを持たないことを想定しています。
  • React.createClass というのは、ES6 では意味をなさないのです :)