react のレンダリング（深い階層のもつオブジェクト）

Question

下記のような Chapter を react の setState で状態管理しています。

type Question = {
  title: string;
  body: string;
  answers: string[];
}


type Chapter = {
  title: string;
  questions: Question[];
}

下記のように、chapters の中の questions に対して、map で TestQuestionというコンポーネントを展開して表示しています（タイトルを示すぐらいのもの）。

const Test = () => {
  const [chapters, setChapters] = useState<Chapter[] | undefined>()

  return (
    <div>
      {chapters && chapters?.questions && chapters.questions.map(question => (
         <TestQuestion question={question} />
      )
    </div>
  )
}

chapters（配列）の中の questions を下記のようなメソッドで変更したところ、chapters は変わっているのですが（コンソールで確認済み）、<TestQustion />はレンダリングされず、困っております。

// 更新処理
const changeChapters = (index:number, newTitle:string) => {
  let arr = [...chapters]
  arr[index]["questions"]["title"] = newTitle
  setChapters(arr)
}

[...chapters] を使い、配列を再生成？しているため、レンダリングされると思ったのですが、うまくいかず。。おそらく、階層が深い questions を更新しているため、レンダリングの判定で 前回のオブジェクトと同じだと認識されているのではないかと思います。

このような、オブジェクトの中に配列を持ち、その中のオブジェクトを更新するケースに置いて、値を更新後にレンダリングさせるにはどうすれば良いでしょうか。

何卒よろしくお願いします。

Comments

[hoshi-takanori]

chapters だけでなく、Chapter や Question も作り直す必要があります。
あと、arr[index]["questions"] は配列なので、もう一つ index が必要では。