[解決済み] クラスメソッドで '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 では意味をなさないのです :)
関連
-
[解決済み】node.js TypeError: path must be absolute or specify root to res.sendFile [JSONのパースに失敗しました]。
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] セレクタの子を取得する方法は?
-
[解決済み] コールバック内で正しい `this` にアクセスする方法
-
[解決済み] 指定された要素にクラスを追加するには?
-
[解決済み] React jsのonClickはメソッドに値を渡すことができない
-
[解決済み] 親メソッドから子メソッドを呼び出す
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】ES6クラス変数の代替品
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】未定義のプロパティ 'bind' を読み込めない。React.js【重複あり
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み】Babel NodeJS ES6: SyntaxError: 予期しないトークンのエクスポート
-
[解決済み】TypeError:res.jsonは関数ではありません。