[react]stateの値を一部分だけsetStateで変更したい。

Question

reactであるstateを変更したいのですが、
変更箇所が一部分だけの場合どうしたらいいかわからないので教えてください。

コード
※コードは省略させて頂きます

this.state = {
  arr: [
    {test: '111', test2: '222', test3: '333'},
    {test4: '444', test5: '555', test6: '666'},
    {test7: '777', test8: '888', test9: '999'}
  ]
}

この場合、例えばtest4だけ変えたい場合などはどうすればいいでしょうか？
イメージとしては、

this.setState({
  arr: [
    {test4: 'aaaa', test5: '555', test6: '666'},
  ]
});

こんな感じでできるのかなと思ったのですが、
これだとsetStateしたタイミングでtest,test2,test3,test7,test8,test9のプロパティが消滅して
しまうのでダメでした。

あとは、

this.setState({
  arr: [
    {test: '111', test2: '222', test3: '333'},
    {test4: 'aaaa', test5: '555', test6: '666'},
    {test7: '777', test8: '888', test9: '999'}
  ]
});

このようにやれば実現はできるのですが、
test,test2,test3,test7,test8,test9に関してはまた違う場合にstateを変更する可能性があるので
このままでやると上記のsetStateが走ったら初期値に戻ってしまうのでこのやり方以外であれば
教えて頂きたいです。

Comments

[退会済みユーザー]

未解決の質問を先に全て解決して下さい。また、こちらを参考に質問文を１時間ほどかけて大幅に修正して下さい。https://teratail.com/help/question-tips

Answer 1

{test4: 'aaaa', test5: '555', test6: '666'}

もう少し現実的なサンプルコードを例として載せて頂けると、それに寄せた回答が出来ると思います。
おそらく、データの持たせ方自体を変えたほうが良いのだろうなと思います。

以前、watadon111さんが投稿されたこちらの類似質問「react 特定のstateを変更したい」へ回答済みですので、そちらの回答をまずは参考になさってみて下さい。ネストが深いデータ構造の場合、ディープコピーをしてくれるライブラリを使うなり、reduxを使うなりした方が楽ですね。ライブラリなど使わずにネストの深いコピーをしようとすると、ディープコピーしているつもりがシャローコピーに中途半端に実はなっていたりしてバグでハマりやすくなるかと思います。。。

Answer 2

字面通りに捉えるなら

const changedState = {...this.state};
changedState.arr[1].test4 = 'aaaa';
this.setState(changedState);

ですが、test4がある場所が2つ目とは限らないのであれば、Array.indexOf等を使って適切なindexを探してください。

また、{...this.state}の部分で、スプレッド構文が使えないのであればObject.assign等を使ってください。this.stateのcloneが作れればいいです。

Comments

[k.tada]

ただ、HayatoKamonoさんもおっしゃっている通り、あまりReactComponentのstateでネストが深いデータ構造を持つのはおすすめしません。
また、stateの持ち方を見る限り、３つずつデータをグルーピングしているなど画面への表示方法も考慮した形になっていると推測しましたが、本来であれば、stateにはデータそのものを持ち、表示方法等はrenderメソッドで行うのがベターです（MVCでいうとstateがM、renderメソッドがVに当たるので、MでVのことを考慮するのはあまり良くないです）

Answer 3

これじゃダメですか？

this.state.arr[1].test4 = 'aaaa';

Comments

[退会済みユーザー]

確か、reactでstateを変更するときはsetStateでしか変更できない、又は推奨されていなかったと思います。

[kszk311]

そうだったんですね、reactのことはほとんど知りませんでした、そんなルールがあったとは…。
直接変えちゃダメなんですね、でしゃばっちゃってすみません。