时间戳

首页 > 解决方案 > 我得到了两个我无法解决的错误作为回报 ESLint 和破坏

reactjs - 我得到了两个我无法解决的错误作为回报 ESLint 和破坏

问题描述

我有两个很常见的问题，但我不知道如何在我的代码中解决它们。我正在使用 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

谢谢！

标签： reactjseslint

解决方案

您的 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>

推荐阅读