Javascript 预期“this”将由类方法使用

Expected 'this' to be used by class method

提问by Hinesh Patel

In my class, eslint is complaining "Expected 'this' to be used by class method 'getUrlParams'

在我的课堂上，eslint 抱怨“预期的 'this' 将被类方法 'getUrlParams' 使用

Here is my class:

这是我的课：

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

What is the best approach to solve this or refactor this component?

解决此问题或重构此组件的最佳方法是什么？

采纳答案by Amir-Mousavi

you should bind the function to thisas the ESLint error says "Expected 'this' to be used by class method 'getUrlParams'

您应该将函数绑定到thisESLint 错误所说的"Expected 'this' to be used by class method 'getUrlParams'

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

as you are not using getUrlParamsduring render (like onClick()) so the above technique is good which we can call it "usage of arrow function in class property".

由于您getUrlParams在渲染期间没有使用（如onClick()），因此上述技术很好，我们可以将其称为“在类属性中使用箭头函数”。

there are other ways of binding too:

还有其他绑定方式：

• binding in constructor this.getUrlParams=this.getUrlParams.bind(this)
• arrow function in render e.g.onClick={()=>this.getUrlParams()}assumed that function does not have params.
• and React.createClasswhich with ES6 does not make sense :)

• 在构造函数中绑定 this.getUrlParams=this.getUrlParams.bind(this)
• 渲染中的箭头函数，例如onClick={()=>this.getUrlParams()}假定函数没有参数。
• 而React.createClass这与 ES6 没有意义:)

回答by Ioan

This is a ESlint rule, see class-methods-use-this.

这是一个 ESlint 规则，参见class-methods-use-this。

You could extract the method getUrlParamsand put it into a helper, or to make it static.

您可以提取该方法getUrlParams并将其放入一个助手中，或者制作它static。

What could you also do is to move the this.props.location.searchinside the method, therefore calling the this.getUrlParams()method without parameter, as it seems you are using it only once.

您还可以做的是this.props.location.search在方法内部移动，因此this.getUrlParams()不带参数地调用该方法，因为您似乎只使用了一次。

Therefore, this could look like:

因此，这可能如下所示：

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

A last option would be to disable this ESlint rule.

最后一个选项是禁用此 ESlint 规则。

回答by Faris Rayhan

Another use case could be.

另一个用例可能是。

Let's say you have method called handlePasswordKeyUp. The body of function can be seen like this.

假设您有一个名为handlePasswordKeyUp 的方法。函数体可以这样看。

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

Above code will trigger that error. So at least use thisinside the body function

上面的代码将触发该错误。所以至少在 body 函数中使用this

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

回答by rfdc

getUrlParams = queryString => { ... }

回答by Arjun G Perambra

My solution is to use this function outside of class and bind this function to class.

我的解决方案是在类之外使用此函数并将此函数绑定到类。

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

回答by Shubhendu Vaid

A possible hack to this rule could be.

这个规则的一个可能的黑客可能是。

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