ネストされた連想配列の更新について

Question

前提・実現したいこと

[https://mui.com/components/checkboxes/#indeterminate]
上記URLにあるようなコンポーネント作成したいと思い、
親子関係にあるチェックボックス操作で、チェック状態を維持したいと思っています。
子のチェックボックスが変わったら、checkedをtrueにしたいのですが連想配列の操作がうまく行っていません。

{
    "value": [
        {
            "parent_id": "2020",
            "state": [
                {
                    "child_id": "100",
                    "checked": false
                },
                {
                    "id": "200",
                    "checked": false
                }
            ]
        },
        {
            "parent_id": "2021",
            "state": [
                {
                    "child_id": "3",
                    "checked": false
                }
            ]
        }
    ]
}

発生している問題・エラーメッセージ

Cannot assign to read only property 'checked' of object 
Cannot set properties of undefined

該当のソースコード

checkboxのchangeイベントで下記のように該当するchild_idを特定し、checkedを書き換えようとしています。
一旦、一時的な更新データを作成した上で、スプレッド構文にてデータの更新を試みようとしています。

checkArray.forEach((checkData, index) => {
  const result = checkData.state.findIndex((data) => data.id === e.target.value);
  if (result !== -1) {
    // 親データを取り出し、一時領域に格納
    tmpParent.year = checkData.parent_id;
    tmpParent.state = [];

    // 子のデータを取り出し更新、一時領域に格納
    tmpChild = { ...checkData.state[result], ...{ checked: true } };
    tmpParent.state[tmpParent.state.length] = tmpChild;

    const tmp = { ...checkData.state, ...tmpParent.state };
    tmpParent.state = tmp;

  }
});

試したこと

連想配列で下記のように処理してもエラーとなってしまい、スプレッド構文で更新をしようとしています。

checkArray[index].stete[result].checked = true

補足情報（FW/ツールのバージョンなど）

react 17.2
recoil 0.5.2

Answer 1

[https://mui.com/components/checkboxes/#indeterminate]

上記URLにあるようなコンポーネント作成したいと思い、

そちらのMaterial UIのドキュメントにあるサンプルコード をforkして、質問にあるJSONに含まれる配列を初期stateとして、それっぽく動くものにしました。

???? forkしてそれっぽく動くようにしたもの

（※JSONの配列要素"parent_id":"2022"をひとつ足しています。また、子要素の配列であるstateというプロパティ名は、Reactコンポーネントのstateと混同してしまうため、children に変えています。）

import * as React from "react";
import Box from "@mui/material/Box";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";

const DEFAULT_ARRAY = JSON.parse(`{
  "value":[
     {
        "parent_id":"2020",
        "children":[
           {
              "child_id":"100",
              "checked":false
           },
           {
              "child_id":"200",
              "checked":false
           }
        ]
     },
     {
        "parent_id":"2021",
        "children":[
           {
              "child_id":"3",
              "checked":false
           }
        ]
     },
     {
        "parent_id":"2022",
        "children":[
           {
              "child_id":"103",
              "checked":false
           },
           {
              "child_id":"104",
              "checked":true
           },
           {
              "child_id":"105",
              "checked":true
           },
           {
              "child_id":"106",
              "checked":false
           }
        ]
     }
  ]
}`).value;

const IndeterminateCheckbox = ({ data: { parent_id, children }, onCheck }) => {
  const handleChange1 = (event) => {
    onCheck(
      [...children].map((_, i) => i),
      event.target.checked
    );
  };

  const handleChange2 = (event, i) => {
    onCheck([i], event.target.checked);
  };

  const childrenBox = (
    <Box sx={{ display: "flex", flexDirection: "column", ml: 3 }}>
      {children.map(({ child_id, checked }, i) => (
        <FormControlLabel
          key={`child-${child_id}`}
          label={`Child-${child_id}`}
          control={
            <Checkbox
              checked={checked}
              onChange={(event) => {
                handleChange2(event, i);
              }}
            />
          }
        />
      ))}
    </Box>
  );

  return (
    <div>
      <FormControlLabel
        label={`Parent-${parent_id}`}
        control={
          <Checkbox
            checked={children.every(({ checked }) => checked)}
            indeterminate={
              children.some(({ checked }) => checked) &&
              children.some(({ checked }) => !checked)
            }
            onChange={handleChange1}
          />
        }
      />
      {childrenBox}
    </div>
  );
};

const App = () => {
  const [checkArray, setCheckArray] = React.useState(DEFAULT_ARRAY);

  const handleCheck = React.useCallback(
    (dataIndex, childrenIndexes, checked) => {
      const nextCheckArray = checkArray.map((data, i) => {
        if (i !== dataIndex) return data;

        return {
          ...data,
          children: data.children.map((child, j) => ({
            ...child,
            checked: childrenIndexes.includes(j) ? checked : child.checked
          }))
        };
      });

      setCheckArray(nextCheckArray);
    },
    [checkArray]
  );

  return (
    <div>
      {checkArray.map((data, i) => (
        <IndeterminateCheckbox
          key={`data-${i}`}
          data={data}
          onCheck={(childrenIndexes, checked) => {
            handleCheck(i, childrenIndexes, checked);
          }}
        />
      ))}
    </div>
  );
};

export default App;

追記

上記回答コードの修正案を挙げておきます。AppのhandleCheckの引数を以下のように修正しました。

- (dataIndex, childrenIndexes, checked) => {
+ (parentId, childId, checked) => {

• 第一引数を、親要素のインデクスにしていたのを、親要素のidに変更した。

• 第二引数を子要素のインデクスの配列にしていましたが、配列ではなく子要素のid一個にして、これに-1 を渡されると、すべての子要素のcheckedを第三引数で渡される値に更新することにした。

上記の変更にあわせて全体を見直したものがコレです???? forkしてそれっぽく動くようにしたもの(修正後)

Comments

[underfield]

サンプルを修正していただき、大変有り難うございます。
やりたいことの実現ができそうな目処が立ちました。
また、修正版までしていただき感謝しかありません。今後とも宜しくお願いします。

[退会済みユーザー]

> やりたいことの実現ができそうな目処が立ちました。
よかったです????

配列の各要素が、重複のない id を持っている場合、
・更新などの対象になる要素を特定するとき
や、
・コンポーネントの配列をmapで作るときの、各コンポーネントのkey属性の値をつくるとき
には、追記した修正案のように、配列内のインデクス（mapに与える関数の第二引数）ではなく、id を使ったほうが（後々の機能追加のことを考えても）より良いかと思います。

[underfield]

サンプルをもとにやりたいことが実現できました。
ありがとうございます。またよろしくおねがいします。

Answer 2

ある配列の特定の要素を更新する処理はArray.prototype.map()を使って以下のように書きます。

const update = (arr, index, value) =>
  // mapに渡す関数で、i番目の要素ならvalue、それ以外はオリジナルを返すことで、配列を更新する
  arr.map((v, i) => i === index ? value : v);

あるオブジェクトの特定のプロパティの値を更新する処理はスプレッド構文を使って以下のように書けます。

const updateId = (obj, newId) =>
  // スプレッド構文でオブジェクトの中身を展開し、キーが"id"のプロパティの値はnewIdにすることで更新する
  ({ ...obj, id: newId });

キー名も引数で指定したいときはこうです。

const update = (obj, key, value) =>
  // スプレッド構文でオブジェクトの中身を展開し、キーがkeyのプロパティの値はvalueにすることで更新する
  ({ ...obj, [key]: value });

よって、配列の中のi番目のオブジェクトのcheckedプロパティを更新する処理はこう書きます。

const update = (arr, index, value = true) =>
  arr.map((item, i) => ({
    ...item,
    checked: (i === index) ? value : item.checked,
  }));

const data = [{
  id: "a",
  checked: false,
}, {
  id: "b",
  checked: false,
}];

const b_checked = update(data, 1);

/*
b_checked = [{
  id: "a",
  checked: false,
}, {
  id: "b",
  checked: true,  // 2番目のオブジェクトのcheckedプロパティが更新される
}];
 */

というわけで、これらを踏まえて考えてみると、以下のようになるのではないでしょうか。

parent_idとchild_idを指定して更新するパターンと、配列のインデックスを指定して更新するパターンを作ってみました。

// parent_idとchild_idを指定して更新
const updateCheckById = (data, parentId, childId, value = true) =>
  data.map(parent => ({
    ...parent,
    state: parent.state.map(child => ({
      ...child,
      checked: (parent.parent_id === parentId && child.child_id === childId) ? value : child.checked,
    })),
  }));

// インデックスを指定して更新
const updateCheckByIndex = (data, parentIndex, childIndex, value = true) =>
  data.map((parent, parent_index) => ({
    ...parent,
    state: parent.state.map((child, child_index) => ({
      ...child,
      checked: (parent_index === parentIndex && child_index === childIndex) ? value : child.checked,
    })),
  }));

以上、お役に立てれば幸いです。

Comments

[underfield]

細かく動作に関して、ご教授いただきありがとうござます。
大変わかりやすく助かりました。
ご回答頂きましたソースでも動作検証を行ってみようと思っております。
今後とも宜しくお願いします。