预期“ this”将被类方法使用

Question

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

这是我的课：

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

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

Answer 1

您应该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没有意义:)