[解決済み] eslint: no-case-declaration - case ブロックで予期しない字句の宣言があった。

質問

このコンテキストでreducerの内部で状態を更新するには、どのような方法が良いのでしょうか？

case DELETE_INTEREST:
    let deleteInterests = state.user.interests;
    let index = deleteInterests.findIndex(i => i == action.payload);
    deleteInterests.splice(index, 1);
    return { ...state, user: { ...state.user, interests: deleteInterests } };

ESLint は、reducer 内の case ブロックの中にある let ステートメントが好きではありません。

eslint: no-case-declaration - unexpected lexical declaration in case ブロック

解決方法は？

の中のcaseブロックの中にあるlet文はESLintでは好まれません。 なぜですか？

これは、変数が現在の case . ブロックを使用することで、変数のスコープをそのブロックに限定することができます。

使用方法 {} のように、ブロックスコープをcaseで作成します。

case DELETE_INTEREST: {
    let .....
    return (...)
}

このスニペットを確認してください。

function withOutBraces() { 
  switch(1){
    case 1: 
      let a=10; 
      console.log('case 1', a); 
    case 2: 
      console.log('case 2', a)
  } 
}

function withBraces() { 
  switch(1){
    case 1: {
      let a=10; 
      console.log('case 1', a); 
    }
    case 2: {
      console.log('case 2', a)
    }
  } 
}

console.log('========First Case ============')
withOutBraces()
console.log('========Second Case ============')
withBraces();

配列から要素を削除するには アレイフィルタ なぜなら スプライス は、元の配列の変更を行います。このように書きます。

case DELETE_INTEREST:
    let deleteInterests = state.user.interests;
    let newData = deleteInterests.filter(i => i !== action.payload);
    return { ...state, user: { ...state.user, interests: newData } };