Я получаю две ошибки, которые не могу решить взамен ESLint и разрушая

Question

У меня две довольно распространенные проблемы, но я не знаю, как их решить в своем коде.Я работаю с ReactJS + ESLint

Я пытался объявить const для этого, но после говорит "запрос" не используется.

  handleInputChange = () => {
    this.setState(
      {
        query: this.search.value,
      },
      () => {
        if (this.state.query && this.state.query.length > 1) {
          if (this.state.query.length % 2 === 0) {
            this.getInfo();
          }
        }
      },
    );
  };

Должен использовать разрушающее присвоение состояния состояния

И вторая ошибка:

 <input
              className="inputsearch"
              placeholder="Busca en ”El Cinco Cero”"
              ref={input => (this.search = input)}
              onChange={this.handleInputChange}
            />

Функция стрелки не должна возвращать присвоение

И это:

<ul className = "search">
              {results.results &&
                results.results.posts.rows.map (item => {
                  return (
                    <li key = {item.title}>
                      <Link
                        to = {`/ news / day / $ {item.category.id} / $ {item.id} /`}
                        key = {item.id}>
                        {item.title}
                      </ Link>
                    </ li>
                  );
                })}
            </ ul>

неожиданный оператор блока, окружающий тело стрелки arrow-body-style

Спасибо!

Answer 1

Ваш линтер хочет, чтобы вы деконструировали ваше состояние следующим образом:

const { query } = this.state

Теперь переменная query будет доступна сразу после этого, делая ваш код немного более читабельным:

handleInputChange = () => {
    const { query } = this.state;
    this.setState(
        {
            query: this.search.value,
        },
        () => {
            if (query && query.length > 1 && !query.length % 2) {
                this.getInfo();
            }
        },
    );
};

А для второго бита кода необходимо поместить инструкции функции в фигурные скобки, а не в скобки:

<input
    className="inputsearch"
    placeholder="Busca en ”El Cinco Cero”"
    ref={input => { this.search = input; }}
    onChange={this.handleInputChange}
/>

А для третьего бита кода вы можете просто удалить фигурные скобки иоператор return (вы можете добавить круглые скобки, если хотите, вокруг своего внутреннего компонента):

<ul className="search">
    {results.results && results.results.posts.rows.map(item => 
        <li key={item.title}>
            <Link
                to={`/ news / day / ${item.category.id} / ${item.id} /`}
                key={item.id}>
                {item.title}
            </ Link>
        </li>
    )}
</ul>