ReactJS es-lint：returnステートメントに割り当てを含めることはできません

Question

この場合、es-lintは失敗します： returnステートメントに代入no-return-assignを含めることはできません

私はこのスレッドを調べましたが、役に立ちませんでした：矢印関数は代入を返さないはずですno-return-assign

es-lintを満たすためにここで何ができますか？

私の状態変数

const [monthlyIncidents, setMonthlyIncidents] = useState([
    // monthlyIncidents[0] -> January ... monthlyIncidents[11] -> December
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
    0,
  ])

状態を更新する方法

setMonthlyIncidents((prevIncidents) => {
   return { ...prevIncidents, [incidentMonth]: monthlyIncidents[incidentMonth] += 1 }
})

Answer 1

私の推測では、それは+= 1割り当てとして見ています（これは偶然にも状態の変化です）。

現在の状態に1つ追加するだけでうまくいくかもしれません。これにより、配列がオブジェクトに変換される可能性が高いため、注意が必要です。

setMonthlyIncidents((prevIncidents) => {
  return {
    ...prevIncidents,
    [incidentMonth]: prevIncidents[incidentMonth] + 1,
  }
})

通常、このような状態の更新では、既存の状態を次の状態にマップして要素を更新することをお勧めします。incidentMonth単なる配列インデックスのように見えるので、インデックスでインシデントを照合できます。これにより、状態が配列のままであることが保証されます。

setMonthlyIncidents((prevIncidents) =>
  prevIncidents.map((incident, index) =>
    incident + index === incidentMonth ? 1 : 0
  )
);

Answer 2

試してみてください

setMonthlyIncidents（{... prevIncidents、[incidentMonth]：prevIncidents [incidentMonth] + 1、

}）。

返されるときに状態を割り当てる必要はありません。さらに、状態を設定するためのまったく新しい関数を作成している理由がわかりません。（setStateVariableフックは何をしますか？）その行のes-lintを無効にすることもできます。