Ожидаемый 'this', который будет использоваться методом класса

В моем классе 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>
    );
  }
}

Каков наилучший подход для решения этой проблемы или реорганизация этого компонента?

Ответ 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 не имеет смысла :)

Ответ 2

Это правило ESlint, см. class-methods-use-this.

Вы можете извлечь метод getUrlParams и поместить его в помощник или сделать его static.

Что вы также можете сделать, это переместить this.props.location.search внутри метода, поэтому вызов метода this.getUrlParams() без параметра, поскольку кажется, что вы используете его только один раз.

Следовательно, это может выглядеть так:

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

Последний параметр - отключить это правило ESlint.

Ответ 3

Другой вариант использования может быть.

Скажем, у вас есть метод под названием handlePasswordKeyUp. Тело функции можно увидеть следующим образом.

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

Выше кода вызовет эту ошибку. Поэтому, по крайней мере, используйте этот внутри функции body

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

Ответ 4

getUrlParams = queryString => { ... }

Ответ 5

Мое решение состоит в том, чтобы использовать эту функцию вне класса и связать эту функцию с классом.

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

Ответ 6

Возможное взломать это правило может быть.

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