화살표 함수가 할당을 반환하지 않아야 합니까?

화살표 함수가 할당을 반환하지 않아야 합니까?

앱에서는 코드가 올바르게 동작하고 있습니다만, eslint가 마음에 들지 않고, 과제를 반환하지 말라고 하고 있습니다.이거 왜 이래?

<div ref={(el) => this.myCustomEl = el} />

수정 사항:

<div ref={(el) => { this.myCustomEl = el }} />

설명:

현재 코드는 다음과 같습니다.

<div ref={(el) => { return this.myCustomEl = el }} />

이 결과에 대한 결과를 반환합니다.myCustomEl = el.코드에서는 문제가 되지 않습니다. 그러나 프로그래밍에서 가장 짜증나는 버그 중 하나는 다음과 같이 비교기(== 또는 ===) 대신 할당(=)을 실수로 사용할 때 발생합니다.

// This function will always return **true**, surprisingly
function isEqual(a, b) {
  // The warning would be thrown here, because you probably meant to type "a===b". The below function will always return true;
  return a=b;
}

let k=false;
let j=true;

if(isEqual(k,j)){
  // You'll be very, very, very confused as to why this code is reached because you literally just set k to be false and j to be true, so they should be different, right? Right?
  thisWillExecuteUnexpectedly();
}

위의 경우 컴파일러 경고는 다음과 같은 이유로 의미가 있습니다.k=true(대신) 사실로 평가하다k===true(이것은, 입력하려고 하고 있었을 가능성이 있습니다), 의도하지 않은 동작을 일으킵니다.따라서, eshint는 할당을 반환할 때, 비교 반환을 의도한 것으로 간주하고, 주의해야 한다는 것을 알려줍니다.

이 경우 결과를 반환하지 않는 것만으로 해결할 수 있습니다.결과는 괄호 {}을(를) 붙이고 반환문은 추가하지 않습니다.

<div ref={(el) => { this.myCustomEl = el }} />

eshint 경고는 다음과 같이 조정할 수도 있습니다.https://eslint.org/docs/rules/no-return-assign

암묵적으로 과제를 반환하고 있습니다. this.myCustomEl = el과제입니다.화살표 기능을 다음과 같이 변경하여 이 보풀 오류를 해결할 수 있습니다.(el) => { this.myCustomEl =el }더 이상 암묵적으로 되돌아오지 않는 이유는 당신이 그것을 감쌌기 때문이다.{}대신().

사이드 노트:렌더링 메서드 내에서 화살표 함수를 인라인 선언하면PureComponent컴포넌트가 렌더링할 때마다 새로운 익명 함수를 선언해야 하기 때문에 얄팍한 소품 비교는 다음과 같습니다.PureComponentdoes는 이로 인해 파손되어 항상 재작성됩니다.

그것을 컴포넌트의 메서드로 합니다.

class MyClass extends React.PureComponent {
    getRef = (el) => { this.ref = el; }

    render() {
        return <div ref={this.getRef} />;
    }
}

위의 구문이 작동하지 않는 경우 다음을 사용할 수 있습니다.

class MyClass extends React.PureComponent {
    constructor(props) {
        super(props);

        this.ref = null;

        this.getRef = this.getRef.bind(this);
    }

    getRef(el) {
        this.ref = el;
    }

    render() {
        return <div ref={this.getRef} />;
    }
}

우연히 발견한 걸 적어두고 싶어서요Pretty가 설치되어 있는데 계속 페렌이 떨어져 eslint 오류가 발생하였습니다.이를 확인하기 위해 더 예쁜 무시를 추가했습니다.

    <div>
        {/*prettier-ignore*/}
        <Map
            ref={(m) => {
                this.leafletMap = m;
            }}
            center={mapCenter}
            zoom={zoomLevel}
        >
            <TileLayer
                attribution={stamenTonerAttr}
                url={stamenTonerTiles}
            />
        </Map>
    </div>

flowe bracket을 적용하지 않으면 에러 메시지가 나타납니다.

오류:

const isNumeric = n => return !isNaN(parseFloat(n)) && isFinite(n)

솔루션:

const isNumeric = n => {
        return !isNaN(parseFloat(n)) && isFinite(n)
    }

언급URL : https://stackoverflow.com/questions/48413299/arrow-function-should-not-return-assignment