Javascript 预期'；这'；由类方法使用

在我的类中，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>
    );
  }
}

class PostSearch扩展了React.Component{
建造师（道具）{
超级（道具）；
这是.getSearchResults（）；
}
getUrlParams（查询字符串）{
常量hashes=queryString.slice（queryString.indexOf（'？'）+1.split（'&'）；
常量参数={}；
hashes.forEach（（hash）=>{
常量[key，val]=hash.split（'='）；
params[key]=decodeURIComponent（val）；
});
返回参数；
}
getSearchResults（）{
const{terms，category}=this.geturlparms（this.props.location.search）；
this.props.dispatch（Actions.fetchPostsSearchResults（术语、类别））；
}
render（）{
返回(
试验
);
}
}

---

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

这是一条ESlint规则，请参阅

您可以提取方法

geturlparms

，并将其放入助手中，或者将其设置为

static

您还可以在方法内部移动

this.props.location.search

，因此调用

this.geturlparms（）

方法而不带参数，因为您似乎只使用了一次

因此，这可能看起来像：

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

---

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

另一个用例可能是。

假设您有一个名为handlePasswordKeyUp的方法

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

上述代码将触发该错误。因此，至少在body函数中使用这个

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

---

您应该将函数绑定到

this

，因为ESLint错误表示

“预期类方法'geturlparms'将使用'this'

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

由于在渲染期间未使用

geturlparms

（如

onClick（）

），因此上述技术很好，我们可以称之为“在类属性中使用箭头函数”

还有其他绑定方式：

• 构造函数中的绑定this.geturlparms=this.geturlparms.bind（this）
• render中的arrow函数，例如，

  onClick={（）=>this.getUrlParams（）}

  假定该函数没有参数
• 和

  React.createClass

  使用ES6没有意义：）

---

对这条规则的一个可能的攻击可能是

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

---

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

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

---

错误指向哪里？听起来像是一个线头错误。如果您不希望出现此错误，则始终可以禁用林分规则。您之所以会出现错误，是因为

getUrlParams

可能只是模块作用域中的一个辅助函数。它本质上是一个辅助函数，重构和避免此错误的最佳方法是什么？将其提取到

PostSearch

类的外部。您必须问自己一个问题——“组件是否应该负责URL解析？”如果不是，则根据单响应原则规则将其提取到外部，这是帮助您做出OO决策的主要规则之一。这消除了错误，感谢您的帮助。你知道为什么会出现这些错误吗，仅供我参考？我已经更新了我的答案；这是一个ESlint规则，看到了吗。当你不能避免参数时，我们有没有永久的修复方法？但是，有人知道ESlint规则的要点是什么吗？为什么我们要在类方法中引用“this”？我查看了这个规则的eslint文档，它从来没有解释为什么在类方法中不使用“this”是不好的。@mojave尽管规则的名称，它的要点不是你应该从类方法中引用

this

，而是任何不使用

this

的方法都应该转换为静态方法，明确说明该方法不执行任何特定于实例的操作。有时还有一个有用的事实，即可以使用类的静态方法，而无需创建类的实例。感谢您提供此代码段，它可能会提供一些有限的、即时的帮助。A通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有其他类似问题的读者更有用。请在你的答案中添加一些解释，包括你所做的假设。将此作为可接受的答案会给人错误的印象。从技术上讲，它回答了这个问题，但实际上是以一种非常糟糕的方式添加了一个不必要的类变量。@christophermore确切地说，它没有解决这个问题，只是提供了一个糟糕的解决方案。仅仅消除lint错误警告并不是正确的解决方案。如果不需要该行为，则应在eslint配置文件中处理该指定lint的规则。不建议这样做，更好的处理方法是或

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