React useState でのオブジェクトを扱う場合、データの操作方法がわかりません

Question

例として、作成したいデータ形式としては、仮に通常のオブジェクト形式であれば下のようなものです。

let allReplyObject = {
postDocumentId1_Key: [{reply: 'text' }, {reply: 'text'} ],
postDocumentId2_key: [{reply: 'text' }, {reply: 'text'} ]
}

まずは、主オブジェクトの中にキー：値のペアが入っています。
キー側はドキュメントIDで、値側には配列データがある構成です。
その配列内にはオブジェクトが複数入っている構造です。
（実際は配列内オブジェクトはもう少し複雑で、複数のKey：Valueで構成されています）。
上記の例をJavaScriptで扱うならば　ドット演算子ドキュメント名で所望の全配列を取り出したり、
pushで所望の配列にオブジェクトデータを追加したりするのは簡単です。

一方で、このような形式のオブジェクトをReactのuseStateのデータ形式で使う場合、正しい操作がいまいちわかりません。　

やりたい操作は例えば、
１、主オブジェクトに新たなpostDocumentId_Key : [配列] データの追加、
２、指定のドキュメントIdの配列内に更なるオブジェクトの追加、もしくは配列ないの特定のオブジェクトを削除
３、指定のドキュメントIdの配列内のオブジェクトデータを順番に取り出し(key:value の値から表示内容を作成）
4、所望のpostDocumentId_Keyが（作成される前）ない場合のエラーにならないような適切な判定処理

これらの操作方法を教えていただけたら助かります。
メリットとしては、目的のドキュメントIdを元に一発で関連する複数のオブジェクトを配列として取り出せることなんですが、そもそも論、useStateで同じことをするのに別のもっと良い（他のデータ形式）アプローチがありましたら、そちらの別アプローチのご教授でもかまいません。
よろしくお願いします。

この構造を使う具体例としては、掲示板の投稿ポストをクリックし、ページでスクロールした分だけの投稿に対する返信がサーバーから順番に読み込まれ、投稿ID（key)に一致する配列に読み込まれた分だけの返信オブジェクトが配列に挿入されていくというものです。(1返信が配列内の１オブジェクトになります）返信を取得する動作をした場合のみ 投稿ID：[返信オブジェクト配列] の構造が主オブジェクト内に作成され、スクロールを止めるまで返信オブジェクトが取得され配列順に入れられて行きます。

Comments

[hoshi-takanori]

push などの破壊的変更の代わりに、スプレッド演算子などで新しいオブジェクトを作る必要があります。そして、サンプルが抽象的すぎてより良いアプローチの提案は難しそう…。

Answer 1

これらの操作方法を教えていただけたら助かります。

いちばん原始的には、JSON.parse(JSON.stringify(state))としてオブジェクトをディープコピーしてから必要なところを破壊的に書き換えれば、考えることは少なくて済みます。

Comments

[JK_Taro]

ご回答のほどありがとうございます。そうですね、一見良さそうに見えるんですが、大抵のデータが大丈夫なもののfirebaseのserverTimestampのデータの部分でJSON.parse(JSON.stringify())をした時点で不整合が出るようで、つまづいてます。単なる文字列であったり、単純なデータ形式であればこのやり方でも大丈夫そうですが。。

Answer 2

自己解決しました。
とりあえず、JSの操作ほど単純でエレガントではないですが以下の通りです。

まず下記のようなデータで試します。

const object1 = { doc1: [{reply:'hello'} , {reply: 'hi jack'}] };
const object2 = { doc2: [{reply:'greeting'} , {reply: 'hey'}] };
//上記オブジェクトデータを、下記useStateの中に入れ、この質問の一番上に記載したようなデータ構造を作ります。
const [objData, setObjData] = React.useState({...object2,...object3});

//これは後から追加するオブジェクト
const obj = {reply:'this is an added object'}; 

次に関数ですが、存在するkey (doccument id )ならば、そのキーとペアの配列にオブジェクトを挿入し、存在しないdocument id ならば新たなkey:valueを作成しその配列にオブジェクトを挿入します。

    function addObjToData(documentId, newObj){
       //もしドキュメントIDが存在するならば
        if(objData[documentId] !== undefined){
               //（prvData は元のデータ）
            setObjData((prvData) => {
　　　　　　　　　//関係ないデータは３ドット演算子でそのままにして、関係あるドキュメントの配列にnewObjを加える
               return { ...prvData,
　　　　　　　　　　　　　　[documentId]:[...prvData[documentId], newObj]
　　　　　　　　　　　　　　}
            })    
        }else{
            setObjData((prvData) => {
　　　　　//新たなドュメントであれば、元のデータは維持しつつ、別にドキュメントID：[配列オブジェクトを作成]
                return { 
　　　　　　　　　　　　　　　...prvData,
　　　　　　　　　　　　　　　[documentId]:[newObj] 
　　　　　　　　　　}
            })
        }
    }

注意しなければならないのは[ ] が３つの意味合いで使われていること。
１つ目は配列のarray [ ] 　　
2つ目はオブジェクトのキーを入れるためのobjData[key]。これで要素があるかどうか（キーが存在するか）を確認。
3つ目はオブジェクトのキーに対して好きな名前をつけるために、変数の代入を許容するための[ keyName ]: value

関数を使ってみると

addObjToData('doc1', obj);
//結果は
// { doc1: [{reply:'hello'} , {reply: 'hi jack'}, {reply:'this is an added object'} ] ,
//   doc2: [{reply:'greeting'} , {reply: 'hey'}] 
//}


// さらに続けて存在しないdocumentId で代入すると
addObjToData('doc3', obj);

// { doc1: [{reply:'hello'} , {reply: 'hi jack'}, {reply:'this is an added object'} ] ,
//   doc2: [{reply:'greeting'} , {reply: 'hey'}] ,
//   doc3: [{reply:'this is an added object'} ] 
//}

所望のドキュメントIDの配列内のreply: のデータを順に全て表示したい場合はこんな関数

    function showObjReplyData(docId){
        if(objData[docId] !== undefined){
            objData[docId].map((data) => {
                console.log('Show reply: ', data.reply);
            })

        }else{
            console.log('No such document id');
        }
    }

また、スプレッド演算子とスライスを組み合わせれば、配列内の所望のオブジェクトの間に別のオブジェクトを入れたり、特定の位置のオブジェクトだけを消したりもできる。
例えば、既にある配列の２番目（index1)に新たオブジェクトを挿入する場合。

{
...prvData,
 [documentId] : [...prvData[documentId].slice(0, 1), anotherObject, ...prvData[documentId].slice(1) ];
}

また、オブジェクト内に特定のキーがあるかは以下の方法も使えます

Object.keys(objData).includes(docmentId)
// 上は　objData[documentId] !== undefined   と同じ

//下記のようにラップしたり
    function isObjKeyExist(stateData, key) {
        if (Object.keys(stateData).includes(key)) {
            return true;
        } else {
            return false;
        }
    }