Eslint 오류 - 화살표 본문을 둘러싼 예기치 않은 블록 문입니다. 반환된 값을 = 바로 다음에 이동합니다.>

Eslint 오류 - 화살표 본문을 둘러싼 예기치 않은 블록 문입니다. 반환된 값을 = 바로 다음에 이동합니다.>

"Failed to Compile" (컴파일하지 못했습니다)라는 에러가 표시된다.Unexpected block statement surrounding arrow body; move the returned value immediately after the =>

파일:

{
    this.state.items.map((item) => {
       return (
         <div key={item}>
             <a href={item.mainContact.phoneHref + item.mainContact.phone}>
                <i className="fa fa-phone" />
                <strong>{item.mainContact.phone}</strong>
              </a>
          </div>
        );
    })
}

제가 실수를 이해할 수 있도록 도와주실 수 있는 분은 누구라도 좋습니다.

감사해요.

갱신하다

.eslintrc.json 파일:

{
  "env": {
    "browser": true,
    "jest": true
  },
  "extends": ["airbnb"],
  "parser": "babel-eslint",
  "rules": {
      "class-methods-use-this": 0,
      "react/jsx-filename-extension": [
          "error",
          {
            "extensions": [".js", ".jsx"]
          }
      ]
  }
}

패키지의 DevDependencies는 다음과 같습니다.json

"devDependencies": {
  "babel-eslint": "^9.0.0",
  "babel-loader": "^8.0.2",
  "eslint": "^5.6.1",
  "eslint-config-airbnb": "^17.1.0",
  "eslint-loader": "^2.1.1",
  "eslint-plugin-import": "^2.14.0",
  "eslint-plugin-jsx-a11y": "^6.1.1",
  "eslint-plugin-react": "^7.11.1",
  "json-loader": "^0.5.7",
  "react-html-parser": "^2.0.2",
  "react-transition-group": "^2.4.0",
  "webpack-cli": "^3.1.1"
},

화살표 함수를 사용하는 경우 값을 반환할 때 다음 두 가지 구문 옵션이 있습니다.

1. ( ) = > { 반품 }
2. ( ) = > 식

두 번째 경우 자동으로 반환되는 식을 쓰면 됩니다.eslint 규칙은 하나의 표현식만 있는 경우 다음과 같이 중괄호를 삭제하고 직접 식을 반환할 수 있음을 나타냅니다.

{
    this.state.items.map((item) => (
         <div key={item}>
             <a href={item.mainContact.phoneHref + item.mainContact.phone}>
                <i className="fa fa-phone" />
                <strong>{item.mainContact.phone}</strong>
              </a>
          </div>
        )
    );
}

return() 함수를 삭제하고 블록 전체를 이렇게 기능시킵니다.

{
    this.state.items.map((item) => (
         <div key={item}>DATA</div>
    )
}

다음은 동작 예를 제시하겠습니다.

() => { return <div key={item}>DATA</div>}

반품 기능을 제거한 후에는 그렇게 동작합니다.

() => (<div key={item}>DATA</div>)

또는

() => yourState

다음 코드를 추가합니다.

"arrow-body-style": "off"

당신은 에어비앤비 eslint 프리셋을 사용하고 있다.

하나의 개체만 반환하는 경우 화살표 함수가 중괄호를 사용하지 않도록 강제합니다.

코드를 이렇게 변경하면 컴파일 됩니다.

this.state.items.map((item) => (<div key={item}>
     <a href={item.mainContact.phoneHref + item.mainContact.phone}>
        <i className="fa fa-phone" />
        <strong>{item.mainContact.phone}</strong>
      </a>
  </div>)
)

이 규칙에 대해서는 문서를 참조해 주세요.

Airbnb repo에서 구성되는 항목을 확인하십시오.

규칙에서는 반환하는 에 둘러싸인 "return"과 함께 곱슬곱슬한 괄호를 제거할 수 있습니다.단, if 문을 반환하려면 곱슬괄호가 필요합니다.

보풀 에러에 근거한 질문에 대한 올바른 해결 방법은 다음과 같습니다.

{
    this.state.items.map((item) => (
         <div key={item}>
             <a href={item.mainContact.phoneHref + item.mainContact.phone}>
                <i className="fa fa-phone" />
                <strong>{item.mainContact.phone}</strong>
              </a>
          </div>
        )
    );
}

그러나 여러 식을 반환하는 경우에는 중괄호가 필요합니다.if 문을 사용하는 예를 다음에 나타냅니다.

{
    this.state.items.map((item) => {
      if (!item.mainContact.phone) {
        return (
          <div key={item}>
            <span>n/a</span>
          </div>
        )
      }
      return (
        <div key={item}>
            <a href={item.mainContact.phoneHref + item.mainContact.phone}>
               <i className="fa fa-phone" />
               <strong>{item.mainContact.phone}</strong>
             </a>
         </div>
      );
    })
}

다음과 같이 쓸 수 있습니다.

const myFunction = (func) => {
  return (req, res, next) => {
    func(req, res, next).catch(next);
  };
};

다음과 같이:

const myFunction = (func) => (req, res, next) =>
  func(req, res, next).catch(next);

확장자에 Babel이 설치되어 있는 경우 이 확장자를 제거하면 오류가 해결됩니다.

맵을 사용하여 직접 json을 반환할 때 문제가 발생하였습니다.

const Containers = Sales.results.map((value) => {
    return { date: value[0], sale: value[1] };
});

json을 반환하는 방법을 변경해야 했습니다.변수를 사용하여 결과를 유지한 후 여기서 문제를 해결한 변수를 반환했습니다.나중에 수정 코드입니다.

const Containers = Sales.results.map((value) => {
    const finalTrends = { date: value[0], sale: value[1] };
    return finalTrends;
  });

언급URL : https://stackoverflow.com/questions/52636910/eslint-error-unexpected-block-statement-surrounding-arrow-body-move-the-retur