reactにおけるletとspliceの相性が超絶悪い件

変数定義の時に使うlet・constですが、stateの更新の時に

少し差異があることに気が付きました。

例えば、state上に配列があってその配列の中の一つを

spliceを使って除去したとする。

配列の中身は以下のとおり ↓

arr ["john", "mile", "yuka"]

これをletで定義した配列上で処理をする

let arr = this.state.itemList;
arr.splice(1,1);
this.setState({ itemList: arr });

すると以下の結果になる。

arr ["mile", "yuka"]

spliceで1番目を指定している。本来であれば”mile”が消えていないといけないのに、

ここでは”john”が消えてしまっている。

letは再代入が許されているが、ここでは最初のstateを受け取るところにしか明記されていない。

今度はconstで定義したarrで試してみる。

const arr = this.state.itemList;
arr.splice(1,1);
this.setState({ itemList: arr });

結果↓

arr ["john", "yuka"]

今度はきちんと削除できている。ちなみにconstは代入が許されていないが

配列処理は普通に処理できる模様。これがバグなのか自分がこれらの仕様を

理解していないのかいずれにしてもletとspliceの相性がなぜ悪いかは永遠のナゾ。