[解決済み] アロー関数は代入を返してはいけないのですか？

質問

私のコードはアプリでは正しく動作していますが、eslintはそれを好まず、代入を返してはいけないと言っています。これはどうしたことでしょうか？

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

解決方法は？

修正方法

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

説明の様子。

あなたの現在のコードは、それと同等です。

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

this.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 は代入を返すと、比較を返すつもりだったと判断し、注意するよう知らせてくれます。

あなたの場合、結果を返さないようにすれば解決します。これは、{}で囲み、returnステートメントを追加しないことで行います。

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

また、eshintの警告はこのように調整することができます。 https://eslint.org/docs/rules/no-return-assign