Question

我有两个很常见的问题，但是我不知道如何在我的代码中解决它们。我正在使用ReactJS + ESLint

我尝试为此声明const，但是在说“查询”未使用之后。

switch -File

必须使用破坏性状态状态分配

第二个错误是：

  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}
            />

围绕箭头主体arrow-body-style的意外阻止语句

谢谢！

Answer 1

您的linter希望您通过以下方式解构状态：

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>

在返回ESLint和销毁时，我遇到了两个无法解决的错误

1 个答案: